/* ============================================================
   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-explain 13500  tour + feedback: surfaces that EXPLAIN the UI, so they must cover
                        anything they can point at — but stay below --z-conf, because a
                        confirm/permission prompt blocks progress and must always win
     --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.
     [FIX-HDRSSOT-01 / whitespace-top-home] --hdr-h is now declared in EXACTLY this one place —
     app.css previously had its own competing ":root{--hdr-h:56px}" (and a third, always-shadowed
     44px copy inside a landscape media query). Every consumer of var(--hdr-h) actually resolved
     to this 52px value already (last-loaded :root wins), but the fixed home top-bar
     (app-agentic-os.js _injectHomeTopBar) hardcoded its own 52/60px + 52/56px numbers instead of
     reading this var, so it silently drifted out of sync — that drift (not this value) was the
     extra blank gap at the top of Home. Change the number here only; every other file reads it
     live via var(--hdr-h). */
  --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-explain: 13500;
  --z-conf: 14000;
  --z-reauth:16000;
  --z-toast:20000;

  /* Legacy aliases — preserve backward compat with app.js tokens */
  --z-panel:    var(--z-cmdbar);
  /* [FIX-ZOVERLAYSETTINGS-01, 2026-08-20, Round K/L] Was var(--z-fab) = 3000 — every _buildModal()
     consumer (Business Pulse, the new Groups Overview, Default View settings, Uploads history,
     Recent Imports, Saved Plans — all "standard modal, e.g. add-chore/add-note" per CLAUDE.md's
     own z-index table) resolved BELOW --z-sett (10000) and --z-wiz (10500). Several of these are
     opened FROM WITHIN Settings (data-action="sett-business-pulse" et al.) — on the documented
     math they should have rendered invisible, hidden behind the Settings panel that opened them.
     --z-sub (12000) is already declared, by this same file's own ladder comment, for exactly this
     case: "sub-modals INSIDE settings, e.g. add-member." Routing --z-overlay through it instead of
     --z-fab makes every _buildModal() modal actually honour that documented tier. Verified: no
     other consumer of --z-overlay (grepped across app.js/app-agentic-os.js) needs to render BELOW
     Settings — they are all the same "standard sheet/modal" category. Not yet re-verified live in
     a browser (device bridge was down for this investigation) — if a _buildModal() modal ever
     visually regresses behind something at 12000-13499 (AgenticFlowPanel), that is the tier to
     check first. */
  --z-overlay:  var(--z-sub);
  --z-submodal: var(--z-sub);
}

/* [FIX-HDRSSOT-01] Compact short-landscape header (rotated phone, low-height viewport) — moved
   here from app.css so it actually applies. app.css sets .header/.app-header's real height to
   44px directly (unaffected either way) but its own copy of "--hdr-h:44px" for this same media
   query was always shadowed by this file's unconditional --hdr-h above (later in load order
   always wins a same-specificity :root tie), so var(--hdr-h) stayed 52px even in this mode. */
@media (orientation: landscape) and (max-height: 430px) {
  :root { --hdr-h: 44px; }
}

/* [FIX-GRIDSSOT-01 / item 4] Chores/Reminders grid column widths — SSOT.
   CONFIRMED root cause of "header/row alignment inconsistent": .tbl-thead-* and
   #<table>-tbody .table-row each independently hardcoded their own grid-template-columns in
   app.css, in MULTIPLE places (an early no-checkbox version, a later checkbox-aware version for
   Chores only). Chores happened to end up consistent by cascade-order luck (its later pair both
   matched); Reminders never got a checkbox-aware update at all even though its row markup DOES
   render a .row-checkbox (app.js) and its header DOES render a .tbl-check-hdr — 7 grid items
   forced into a 6-track grid, which CSS Grid auto-wraps to a second implicit row rather than
   aligning, exactly the reported symptom. One column template per table, defined ONCE here;
   every header/row rule below reads it via var() so it can't drift apart again. */
:root {
  --chores-grid-cols:    36px minmax(0, 1.5fr) 105px 90px 85px 85px 85px 100px;
  /* [FIX-GRIDSSOT-01 correction] Reminders' real row markup uses class .reminder-row, not
     .table-row, and its header is built with an INLINE grid-template-columns (app.js
     renderRemindersTable, "REMINDER_COLS" — inline style always beats a stylesheet class
     regardless of specificity) — so .tbl-thead-reminders / #reminders-tbody .table-row in
     app.css were both already dead for Reminders specifically, never actually controlling its
     layout. This value matches what was actually live (both sides happened to already agree by
     manual convention — the JS had a comment saying "MUST match row CSS", which is exactly the
     fragile non-SSOT pattern being fixed). app.js now reads this var instead of hardcoding its
     own copy — see REMINDER_COLS in renderRemindersTable. */
  --reminders-grid-cols: 36px minmax(0, 1.6fr) 90px 100px 100px 80px 110px;
  /* [FIX-GRIDSSOT-02 / documents] The Documents list (Settings → Manage my data → Documents,
     _renderDocuments in app-agentic-os.js) rendered its header row and each data row as TWO
     SEPARATE grid containers that both used `auto auto 1fr 78px 84px auto auto`. Because `auto`
     tracks size to each grid's OWN content, the header's empty leading/trailing <span>s collapsed
     to ~0px while the rows' checkbox/file-icon/open/delete cells took real width — so every column
     from "Document" onward sat shifted relative to its header ("documents grid out of whack").
     Fixed by replacing the content-dependent `auto` tracks with fixed widths shared from this one
     token, so header and rows resolve to identical columns regardless of content.
     Columns: [checkbox] [file-icon] [name 1fr] [time] [source] [open] [delete]. */
  /* [FIX-DOCWIDTH-01 / item 3, this pass] Founder feedback: the list should use the full page
     width with percentage-based content columns, not sit capped at a fixed max-width with fixed-
     px content tracks that leave dead space on anything wider than a phone. Icon-sized columns
     (checkbox/file-icon/open/delete) stay small fixed px — a checkbox doesn't get more useful at
     a bigger size — but Document/Smart Intel/Time/Source (the actual content) now take a
     percentage share of the row so they genuinely use whatever width the panel actually has. */
  --documents-grid-cols: 20px 24px minmax(0, 45%) minmax(0, 25%) minmax(0, 15%) minmax(0, 10%) 28px 28px;
}

/* ═══ 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: 11px; 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: 11px; 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: 11px; 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); } }
/* [FIX-MODALCENTER-01 / item 5] Centered dialogs fade+scale in rather than slide up from the
   bottom — slide-up implies a bottom-sheet origin that no longer matches the centered layout. */
@keyframes apkFadeScaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@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;
  /* [FIX-MODALCENTER-01 / item 5] Was align-items:flex-end (bottom-sheet style) — every
     confirm dialog (logout, delete document, etc, all share this one component) now centers
     vertically in the viewport instead of pinning to the bottom, per explicit request applied
     consistently across every flow that uses it. */
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* [FIX-CONFIRMOPACITY-01 / item 2, 2026-07-23] CONFIRMED via screenshot: rgba(0,0,0,.55) with
     no blur reads as translucent, not opaque, specifically because this app's dark theme already
     sits close to black (--bg-primary) — a black-on-near-black overlay has very little luminance
     delta, so page text/icons stayed clearly legible underneath the "confirm logout" card, which
     is exactly the complaint. Smart Import's own backdrop (app-features-ops.js _ov(), #apk-
     smart-import-bd) already solved this the same way — rgba(0,0,0,.55) PLUS backdrop-filter:
     blur(3px) — the blur, not just the darkening, is what actually obscures underlying content
     regardless of theme contrast. Matched that proven pattern here instead of just raising alpha
     (which alone would still leave sharp, readable edges/icons visible through the darkening). */
  /* Matches the generic .modal backdrop (app.css) exactly — rgba(0,0,0,.7) + blur(4px) — so
     every modal surface in the app (inline .modal dialogs and this confirm overlay) reads as
     equally opaque, not two different strengths depending on which component happened to render
     it. */
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.22s;
  pointer-events: none;
}
.apk-confirm-overlay.open { opacity: 1; pointer-events: auto; }
/* [FIX-CONFIRMCARDCLASS-01, this session] The click-to-dismiss backdrop div inside the overlay
   (apk-session-manager.js's #apk-confirm-bd) had no CSS at all — an empty <div> with no explicit
   sizing collapses to 0×0, so tapping outside the (also previously unstyled) card never dismissed
   the dialog. .apk-confirm-overlay is already `position:fixed`, so this absolute child fills it
   completely; it paints BEHIND .apk-confirm-card purely by DOM order (both z-index:auto), no
   z-index needed here. */
.apk-confirm-bd { position: absolute; inset: 0; }
.apk-confirm-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  /* [FIX-CONFIRMTHEME-01, v0.2.0, this session] CONFIRMED root cause of "logout modal renders in
     light theme regardless of app theme": every OTHER themed surface in this file (bottom-nav,
     command-bar, the settings sheets, .apk-addhome-x's identical icon-bubble treatment, etc. —
     40+ call sites) defends every --bg-*/--text-*/--border/--primary reference with the same
     dark fallback value, precisely so the surface still renders correctly dark if the variable
     hasn't resolved yet (e.g. an auto-triggered logout confirm firing in the seconds around a
     401/session-expiry — see FIX-LOGOUTRACE-01, app-agentic-os.js — is exactly the kind of
     early/edge render window where that matters). The entire .apk-confirm-* family below was the
     ONE themed component missing that convention: with no fallback, an unresolved variable
     computes to its CSS-spec initial value (transparent background, default black text) instead
     of silently staying dark like every sibling surface — a pale card with dark-navy text is
     exactly that failure mode, and exactly what the founder's screenshot showed. Fallback hex
     values below are not new — each one is copied from this same file's own existing convention
     for that variable (see e.g. lines ~235, ~296, ~722, ~1035 for --bg-secondary/--bg-primary;
     ~1560 for --text-secondary; ~933's .apk-addhome-x, the same icon-bubble pattern, for
     --primary), so the whole theme system now shares one fallback per token instead of this one
     component silently having none. */
  background: var(--bg-secondary, #1e293b);
  /* [FIX-MODALCENTER-01] Was 20px 20px 0 0 (bottom-sheet corners) — a centered dialog gets
     all four corners rounded, matching every other centered modal in the app. */
  border-radius: 20px;
  padding: 24px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: apkFadeScaleIn 0.2s;
}
.apk-confirm-title  { font-size: 16px; font-weight: 800; color: var(--text-primary, #f1f5f9); margin-bottom: 10px; }
/* [FIX-CONFIRMLIGHTTHEME-01, this session] .apk-confirm-handle removed — apk-session-manager.js
   no longer renders that div (see its matching comment: a drag-handle bar left over from before
   FIX-MODALCENTER-01 centered this dialog, functionless since, and specifically what read as
   "bad" in light theme thanks to a faint var(--border) line at 60% opacity on a near-white card).
   Nothing else in this file references .apk-confirm-handle. */
.apk-confirm-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(var(--primary-rgb, 37, 99, 235), .12);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
/* [FIX-CONFIRMLIGHTTHEME-01, this session] A 12%-alpha blue fill reads as a clear glowing bubble
   against this card's dark-theme background (--bg-secondary: #1e293b) but washes out to barely
   visible against light theme's near-white card (--bg-secondary: #fdfdfe) — same token, same
   alpha, very different result depending on what it sits on. Dark theme's rule above is untouched
   (it isn't broken); this only adds a light-theme-specific version with a touch more fill and a
   thin matching border so the bubble still reads as a shape, not a stain, once contrast against
   the card's own background can no longer be assumed. */
[data-theme="light"] .apk-confirm-icon, .light-theme .apk-confirm-icon {
  background: rgba(37, 99, 235, .1);
  border: 1px solid rgba(37, 99, 235, .18);
}
.apk-confirm-icon-sym { font-size: 22px; color: var(--primary, #2563eb); }
.apk-confirm-body   { font-size: 14px; color: var(--text-secondary, #94a3b8); line-height: 1.6; margin-bottom: 16px; }
.apk-confirm-amount { font-size: 22px; font-weight: 800; color: var(--primary, #2563eb); margin-bottom: 16px; }
/* [FIX-DIALOGSSOT-01 / item 6] showPromptOverlay's input field — same card, one extra control. */
.apk-confirm-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  margin-bottom: 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #334155);
  background: var(--bg-primary, #0f172a);
  color: var(--text-primary, #f1f5f9);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
/* [FIX-CONFIRMLIGHTTHEME-01, this session] --bg-primary sits noticeably DARKER than the card's
   own --bg-secondary in dark theme (#0f172a vs #1e293b) — a proper sunken input well. In light
   theme the two tokens are both near-white (--bg-primary: #f8fafc, --bg-secondary: #fdfdfe, a
   difference of a couple of shades) — the well all but disappears, leaving only a pale border to
   show where the field is. --bg-tertiary (#f1f5f9) is a full step darker than the card in light
   theme, giving the same sunken-well read the dark-theme rule already gets for free; paired with
   --border-light (already this file's more-visible-of-two-border-tokens, per FIX-
   CONFIRMCOLORVISIBILITY-01's .apk-confirm-no just below) instead of the near-invisible plain
   --border. Dark theme's rule above is untouched. */
[data-theme="light"] .apk-confirm-input, .light-theme .apk-confirm-input {
  background: var(--bg-tertiary, #f1f5f9);
  border-color: var(--border-light, #cbd5e1);
}
.apk-confirm-input:focus { border-color: var(--primary, #6366f1); }
.apk-confirm-actions { display: flex; gap: 10px; }
.apk-confirm-no {
  flex: 1; padding: 12px; border-radius: 12px;
  /* [FIX-CONFIRMCOLORVISIBILITY-01, this session] was var(--border) — the faint divider-only
     token (light theme: #e2e8f0, near-invisible against a near-white card). --border-light is
     the actually-more-visible of this file's two border tokens despite the name (light theme:
     #cbd5e1) — an outline BUTTON needs to read as a shape, not a subtle separator. */
  border: 1.5px solid var(--border-light, #334155); background: transparent;
  /* [FIX-CONFIRMCOLORVISIBILITY-01, this session] was var(--text-secondary) — this is a button
     label, not passive caption text; a secondary ACTION should still read clearly. */
  color: var(--text-primary, #f1f5f9); 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, #2563eb); 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-qa-subtext {
  font-size: 12px; color: var(--text-secondary); margin: -6px 0 10px;
}
.apk-clarify-chips-row, .apk-qa-row { display: flex; flex-wrap: wrap; gap: 6px; }
.apk-clarify-chip, .apk-qa-chip {
  display: flex; align-items: center; gap: 6px;
  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;
}
.apk-qa-chip-sub {
  font-size: 11px; font-weight: 500; color: var(--text-tertiary); opacity: .85;
}

/* ═══ 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: 11px; 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: 11px; 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; }
/* [FIX-GRIDSSOT-01 / item 2] Single source of truth for the Documents grid's column widths —
   was the same grid-template-columns string duplicated inline at the header row and every data
   row, which is exactly how a header and its rows silently drift out of alignment over time (one
   gets edited, the other doesn't). One class, used by both. This is also the pattern any other
   data grid in the app should adopt instead of repeating an inline grid-template-columns string
   — checkbox / icon / name (flexible) / time / source / open / delete. */
/* [FIX-DOCWIDTH-01] grid-template-columns here is a stale placeholder (the real value always
   comes from the inline style="grid-template-columns:var(--documents-grid-cols)" on each row,
   which has higher specificity anyway) — but `max-width:720px` was NOT overridden inline, and
   was the actual reason the list never used the full page width no matter how wide the panel
   was. Removed; width is unconstrained here, only limited by whatever contains .apk-sett-body. */
.apk-doc-grid { display: grid; grid-template-columns: auto auto 1fr 96px 84px 64px auto auto; gap: 10px; align-items: center; min-height: 40px; width: 100%; }

/* [FIX-DOCMOBILE-01 / item 5, SUPERSEDED — see FIX-DOCMOBILE-02 below] Original fix for
   "Documents page broken on mobile, can't see delete" dropped the Smart Intel / Time / Source
   columns from the grid entirely via display:none below 641px. That solved the overlap/squeeze
   problem but at the cost of silently deleting 3 of 8 columns' data on mobile — re-flagged by
   founder review: "documents and other grids [must] show all columns using modern responsive
   principles ... all features should retain value across all devices, period." Replaced below
   with a card-stacking layout (same "grid row -> card" idea already used for Chores/Reminders,
   app.css ~7225 MOBILE CARD LAYOUT) so every column's data stays visible, just arranged as
   stacked lines instead of fixed-width tracks. */
/* [FIX-DOCMOBILE-02, 2026-07-23] Row -> card. Documents' grid children are unclassed (plain
   <div>/<span> in source order: 1 checkbox, 2 file-icon, 3 name, 4 Smart Intel, 5 uploaded date,
   6 source, 7 open link, 8 delete button), so this uses :nth-child instead of the named
   .cell-title/.col-actions classes Chores/Reminders have. !important is still required to win
   over each row's inline style="grid-template-columns:var(--documents-grid-cols)" (a
   non-important media-query rule cannot beat an inline style by cascade order alone). The
   field-label header strip (the OTHER .apk-doc-grid usage, the one with no data-doc-id — see
   _renderDocuments in app-agentic-os.js) is hidden on mobile since each row now carries its own
   inline label for Time/Source; the "Select all" affordance stays visible (separate element,
   not part of this grid). */
@media (max-width: 640px) {
  .apk-doc-grid:not([data-doc-id]) { display: none !important; }
  .apk-doc-grid[data-doc-id] {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 12px 10px 36px;
    border-radius: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    position: relative;
    min-height: 0;
  }
  /* checkbox: pinned top-left, out of flow so it doesn't consume its own card line */
  .apk-doc-grid[data-doc-id] > :nth-child(1) {
    position: absolute !important; top: 12px; left: 10px; width: 18px; height: 18px;
  }
  /* file-type icon: small, leads the first visible line */
  .apk-doc-grid[data-doc-id] > :nth-child(2) { display: inline-flex !important; }
  /* name: full width now, allowed to wrap instead of being clipped */
  .apk-doc-grid[data-doc-id] > :nth-child(3) {
    display: block !important; width: 100% !important;
    white-space: normal !important; overflow: visible !important; text-overflow: unset !important;
    margin-top: 2px;
  }
  /* Smart Intel / Time / Source: this is the actual fix — each gets its own full-width line and
     is allowed to wrap, instead of display:none. Time/Source get a plain-text label since the
     header strip that used to explain them is now hidden on mobile. */
  .apk-doc-grid[data-doc-id] > :nth-child(4),
  .apk-doc-grid[data-doc-id] > :nth-child(5),
  .apk-doc-grid[data-doc-id] > :nth-child(6) {
    display: flex !important; width: 100% !important;
    white-space: normal !important; overflow: visible !important; text-overflow: unset !important;
  }
  .apk-doc-grid[data-doc-id] > :nth-child(5)::before { content: "Uploaded: "; color: var(--text-tertiary); margin-right: 3px; flex-shrink: 0; }
  .apk-doc-grid[data-doc-id] > :nth-child(6)::before { content: "Source: "; color: var(--text-tertiary); margin-right: 3px; flex-shrink: 0; }
  /* open + delete: compact icon actions, right-aligned on their own line at the bottom */
  .apk-doc-grid[data-doc-id] > :nth-child(7),
  .apk-doc-grid[data-doc-id] > :nth-child(8) {
    display: inline-flex !important; align-self: flex-end;
  }
}
.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); }
/* [FIX-THEMEDICONS-01 / item 9] CONFIRMED this class had no rules anywhere in the bundle —
   the button rendered with the browser's own unstyled default appearance (the flat grey square
   seen in the report), not a missing-but-intentional plain look. Real, themed close button. */
.apk-addhome-x {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: rgba(99, 102, 241, .12); color: var(--primary, #6366f1);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .15s, transform .15s;
}
.apk-addhome-x:hover { background: rgba(99, 102, 241, .22); transform: scale(1.05); }
.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: 11px; 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;
}
/* [FIX-WIZTABS-01, v0.2.0 Round AE, founder: "ensure all flows are single paged with tabs as
   needed, remove multi step wizards for all planners"] Tab strip replacing the old sequential
   progress bar (apk-wiz-progress/-bar, now unused) — every section is one tap away at all times
   instead of gated behind Continue/Back. */
.apk-wiz-tabs {
  display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg-primary); flex-shrink: 0; scrollbar-width: none;
}
.apk-wiz-tabs::-webkit-scrollbar { display: none; }
.apk-wiz-tab {
  flex-shrink: 0; padding: 7px 14px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--bg-secondary);
  color: var(--text-secondary); font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: all 0.15s;
}
.apk-wiz-tab.active { border-color: var(--primary); background: rgba(37, 99, 235, 0.1); color: var(--primary); }
/* [FIX-WIZVIEWPORT-01, Round AI, 2026-08-28] min-height:0 is required for a flex:1 item that
   also needs to scroll -- without it, a flex column child defaults to min-height:auto, which lets
   its own content (e.g. Task Master's "plan a project" step: name field + tall textarea + two more
   fields + a priority row) refuse to shrink below its natural height on a short viewport, pushing
   the Save button in .apk-wiz-foot below the fold instead of leaving this area to scroll. */
.apk-wiz-body         { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 16px 8px; -webkit-overflow-scrolling: touch; }
.apk-wiz-step-label   { font-size: 11px; 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; }
/* [FIX-WIZBTNWIDTH-01, Round AU, 2026-08-29, founder: "the create tasks bnuttons and other
   similar primary actions need to be smaller compared to veiwport, keep it responsive and
   intutive."] _WizardBase's shell is deliberately full-viewport edge-to-edge on every size
   (Round AE, "matching every other planner's full-viewport shell") -- that full-bleed chrome is
   untouched here; this is scoped to the primary action row only, the same "targeted fix, not an
   architecture-scale fork" line V020_SCOPE.md already draws for modal-shell asks. .apk-wiz-next
   is flex:1 inside .apk-wiz-foot, so on a wide desktop viewport the button itself stretches to
   the full window width -- a single word centered in ~1900px of blue, screenshot-confirmed. Same
   641px desktop threshold this file already uses everywhere else (the r132 mobile-sheet/
   desktop-center split _buildModal's own header comment cites). */
@media (min-width: 641px) {
  .apk-wiz-foot { max-width: 460px; margin: 0 auto; width: 100%; }
}
/* [FIX-WIZSTUCK-01, 2026-07-30] Brief pulse cue on Continue after a chip pick, for wizard steps
   that mix a chip choice with another field and so don't auto-advance (see _WizardBase.pulseNext
   in app-features-ops.js). Single owner of this animation — do not add a second @keyframes for
   the same purpose. */
@keyframes apkWizPulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
.apk-wiz-next.apk-wiz-pulse { animation: apkWizPulse 0.9s ease-out 1; }
/* 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: 11px; }
.apk-wiz-tag {
  position: absolute; bottom: 6px; right: 8px;
  font-size: 11px; 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: 11px; 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: 11px; 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: 11px; 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);
  /* [FIX-BLURPREFIX-01, this session] was missing the -webkit- pair every other blur in this file
     carries — silently rendered with NO blur on Safari/iOS (sharp backdrop, not a rendering bug
     that shows AS blur, but real cross-browser drift from this file's own convention). */
  backdrop-filter: blur(4px);
  -webkit-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;
  /* [FIX-CONFIRMCOLORVISIBILITY-01, this session] same low-contrast pattern found and fixed in
     the logout confirm's "Stay logged in" button (.apk-confirm-no) — see that rule's comment. */
  border: 1.5px solid var(--border-light); background: transparent;
  color: var(--text-primary); 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 #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: 11px; 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).               ═══════════════ */
/* [FIX-MODALCENTERMOBILE-01, v0.2.0, 2026-08-30, Round BH] Same reversal as the .apk-modal--sheet block above, applied to r132's own set -- #apk-agent-talk-modal and .apk-attach-sheet now center on every viewport too (.apk-addhome-modal already did, via its own base rule, FIX-MODAL-01). This also folds in what used to be a second, byte-for-byte identical copy of this whole block a little further down this file -- removed as dead duplication while touching this rule, not a new change of its own. */
#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;
}

/* [FIX-MODALCENTER-02, 2026-08-20, Round M] _buildModal()'s (app.js) sheet variant — used by
   every generic dialog built through the canonical modal helper, e.g. "Which manager would you
   like to open?" — predates the r132 pattern above and was never wired into it: align-items was
   hardcoded inline (`el.style.cssText`), so it stayed bottom-anchored on every viewport including
   desktop. Same rule as r132: base = mobile bottom-sheet, desktop centers. align-items has to
   live in CSS (not inline, like the rest of _buildModal's positioning) because inline style beats
   any external stylesheet rule regardless of media query — it would silently defeat this block. */
/* [FIX-MODALCENTERMOBILE-01, v0.2.0, 2026-08-30, Round BH, founder: "modals still dont center vertical and horizontally in viewport for mobile, fix it."] Was mobile bottom-sheet / desktop-centered (FIX-MODALCENTER-02, Round M) -- deliberate at the time (bottom sheets read as more thumb-reachable on touch). Reversed per explicit, repeated founder direction across two rounds: every _buildModal() sheet dialog (the taxonomy this class covers -- Add Chore/Task, "Which manager?", Momentum Goal, etc.) now centers on EVERY viewport, matching the legacy .modal/.modal-content "r102" convention this codebase already uses elsewhere and answering the open architecture question flagged in the last beta-readiness checklist: centered-everywhere is now the one standard for full-form dialogs. QuickAdd and PageFeedback deliberately keep their own separate bottom-sheet classes untouched below -- those are genuine 1-step quick-action sheets (CLAUDE.md Module Registry #5, #7), not form dialogs, and were never in scope of this complaint. */
/* [FIX-SHEETJUSTIFY-01, r246] This class is the OWNER of "how a sheet dialog is positioned",
   but it only ever declared the vertical half. Both current callers (_buildModal's sheet mode and
   openAddChoreModal) happen to set justify-content:center inline themselves, so the gap is latent
   rather than currently visible -- but "correct only because every caller remembers" is exactly
   the single-owner failure CLAUDE.md section 0 describes, and the next caller that forgets gets a
   left-aligned dialog with no obvious cause. Declared here so the class actually owns both axes.
   Inline styles still win over this (that is why the callers' own values are unchanged); this is
   the floor, not an override. */
.apk-modal--sheet { align-items: center; justify-content: center; }
.apk-modal--sheet-panel {
  border-radius: 16px;
  border-bottom: 1px solid var(--border, #334155);
  margin: 16px;
}


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


/* ═══ r143 [item 1]: BOT RESPONSE ACTION BAR — was completely unstyled ═══════════════════════
   apk-bot-feedback.js builds .apk-bot-actions / .apk-bot-act-btn (thumb up/down, edit, copy)
   with ZERO matching CSS anywhere in the codebase — confirmed by grep across both stylesheets.
   Every button was rendering with the browser's raw default <button> chrome (grey box, hard
   edges, visible only-on-native-focus outline), which is exactly the "weird grey, cluttered"
   look reported. This gives it the same quiet, icon-only, on-hover-reveal treatment used
   everywhere else in the app (.apk-hdr-icon-btn, .apk-msg-edit/.apk-msg-copy on user bubbles)
   instead of a permanently-visible boxed toolbar competing with the reply itself. ═══════════ */
.apk-bot-actions {
  /* [FIX-BOTACTIONSLAYOUT-01] .message-bot (app.css) is `display:flex;flex-direction:row` —
     this bar is appended as a THIRD flex child alongside the avatar and content wrapper, so
     without flex-wrap it sits to the SIDE of the content rather than below it. flex-basis:100%
     on a wrapping flex parent forces a flex item onto its own new line — see the accompanying
     `.message-bot { flex-wrap: wrap }` rule below. This achieves reliable bottom alignment
     without restructuring renderChat()'s DOM (lower risk than moving where the bar attaches). */
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
/* [FIX-BOTACTIONSLAYOUT-01] Enables the flex-basis:100% trick above — without wrap, a flex
   container never breaks a child onto a new line no matter what flex-basis says. */
.message-bot { flex-wrap: wrap; }
.apk-bot-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s;
  /* [FIX-BOTACTIONSTHEME-04 / item 2] Three rounds of contrast tuning on an icon-only, opacity-
     gated style still weren't reading as "clearly visible" — so this stops being a quiet,
     reveal-on-hover treatment and becomes a real, always-visible button chip: solid background
     tint at rest (not just on hover), full-strength icon color, no opacity dimming on the bar
     or the icon. Should be unmistakable regardless of theme or how busy the surrounding
     content is, rather than relying on a specific shade being "just contrasty enough". */
  background: rgba(37, 99, 235, 0.14);
  color: #2563eb;
}
.apk-bot-act-btn .material-symbols-outlined { font-size: 16px; pointer-events: none; }
.apk-bot-act-btn:hover,
.apk-bot-act-btn:focus-visible {
  background: rgba(37, 99, 235, 0.28);
  color: #1d4ed8;
}
/* [FIX-BOTACTIONSTHEME-04] Light theme: same always-visible chip approach, tuned for a white
   card background instead of assuming the dark-theme values also read well there. */
[data-theme="light"] .apk-bot-act-btn { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; }
[data-theme="light"] .apk-bot-act-btn:hover,
[data-theme="light"] .apk-bot-act-btn:focus-visible {
  background: rgba(37, 99, 235, 0.22);
  color: #1e40af;
}
/* Selected/active thumb state — a clear, solid color cue */
.apk-bot-act-up.active   { background: rgba(16,185,129,.16); color: #10b981; }
.apk-bot-act-down.active { background: rgba(239,68,68,.16);  color: #ef4444; }
.apk-bot-act-up:hover    { background: rgba(16,185,129,.22); color: #10b981; }
.apk-bot-act-down:hover  { background: rgba(239,68,68,.22);  color: #ef4444; }

/* ═══ r179 [item 3]: CORRECT-ME EDIT PANEL — was completely unstyled ═══════════════════════
   apk-bot-feedback.js builds .apk-bot-edit-panel / .apk-bep-* with ZERO matching CSS anywhere
   in the codebase (confirmed by grep) — every input/button rendered with raw browser default
   styling. This just makes it look like part of the product instead of an unstyled form.
   [FIX-CORRECTPOS-01 / founder request] Was appended inline below the triggering bot bubble —
   read as "odd" because it could open far above the visible viewport while the user's focus and
   typing cursor are down at the command bar. Now fixed + anchored just above the command bar,
   horizontally centered on it (deliberately NOT the generic dead-center .modal position — this
   one is meant to feel like part of composing the correction, not a separate interruption). ═══ */
.apk-bot-edit-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-conf, 14000);
  background: rgba(2, 6, 23, .35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.apk-bot-edit-panel {
  position: fixed;
  left: 50%;
  bottom: calc(var(--apk-cmd-h, 60px) + var(--apk-sab, env(safe-area-inset-bottom, 0px)) + 14px);
  transform: translateX(-50%);
  z-index: calc(var(--z-conf, 14000) + 1);
  width: min(420px, 92vw);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .3);
  animation: apkFadeScaleIn 0.15s;
}
@media (max-width: 480px) {
  .apk-bot-edit-panel { width: 94vw; }
}
.apk-bep-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.apk-bep-field { margin-bottom: 8px; }
.apk-bep-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}
.apk-bep-input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.apk-bep-input:focus { border-color: var(--primary); }
.apk-bep-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.apk-bep-cancel, .apk-bep-submit {
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.apk-bep-cancel { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border); }
.apk-bep-cancel:hover { background: var(--border); }
.apk-bep-submit { background: var(--primary); color: #fff; }
.apk-bep-submit:hover { background: var(--primary-hover, #6d28d9); }

/* [FIX-BOTACTIONSCOLLAPSE-01] Another toggled-but-unstyled class found alongside the edit
   panel above — .apk-bot-actions--collapsed was being added/removed with zero matching CSS,
   so the action bar stayed fully visible even while the edit panel was open underneath it. */
.apk-bot-actions--collapsed {
  opacity: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MY RULES — [FEATURE-MYRULES-01]  token-driven only, no invented palette.
 * z-index follows the canonical scale in CLAUDE.md §5: 10000 = inline modals.
 * ═════════════════════════════════════════════════════════════════════════ */
/* [FIX-RULESSSOT-01, r153] The backdrop and the floating card are GONE, not restyled.
   r152 moved `.apk-rules-backdrop` off a magic 9999 and onto --z-sub, which was the right
   scale and still the wrong fix: app-agentic-os.css has ONE registered list of settings
   sub-surfaces (the `body.has-settings-open …` block in §24), and this modal was never in it.
   A z-index is not membership. Apunki Rules is now a Settings section rendered into
   #apk-sett-sub, which IS in that list — so it inherits the panel's stacking, transition,
   back button and scroll behaviour and owns none of them itself.
   Do not re-add a `.apk-rules-modal` / `.apk-rules-backdrop` rule here. */
.apk-rules-lede {
  margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.apk-rules-compose { display: flex; gap: 8px; padding: 0 0 6px; }
#apk-rules-input {
  flex: 1; min-width: 0; padding: 10px 12px; font-family: inherit; font-size: 13.5px;
  color: var(--text-primary); background: var(--bg-tertiary);
  border: 1px solid var(--border); border-radius: 10px;
}
#apk-rules-input:focus { outline: none; border-color: var(--primary); }
.apk-rules-add {
  flex-shrink: 0; padding: 10px 16px; border: none; border-radius: 10px; cursor: pointer;
  background: var(--primary); color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 600;
}
.apk-rules-hint { padding: 0; font-size: 12px; color: var(--text-secondary); min-height: 16px; }
.apk-rules-hint.is-error { color: #f59e0b; padding-top: 6px; }
/* No own scroller and no 18px gutter: #apk-sub-body (the settings panel) owns both. A
   nested overflow-y here produced a scroll-inside-a-scroll on mobile. */
.apk-rules-list { padding: 8px 0 18px; }
.apk-rule-row {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.apk-rule-row:last-child { border-bottom: none; }
.apk-rule-toggle {
  flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; cursor: pointer;
  background: var(--bg-tertiary); border: 1px solid var(--border); position: relative;
  transition: background .15s, border-color .15s;
}
.apk-rule-toggle span {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-secondary); transition: transform .15s, background .15s;
}
.apk-rule-toggle.is-on { background: var(--primary); border-color: var(--primary); }
.apk-rule-toggle.is-on span { transform: translateX(16px); background: #fff; }
.apk-rule-text { flex: 1; min-width: 0; }
.apk-rule-text.is-off { opacity: .5; }
.apk-rule-sentence { font-size: 13.5px; color: var(--text-primary); line-height: 1.4; overflow-wrap: anywhere; }
.apk-rule-meta { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
.apk-rule-del { background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 2px; flex-shrink: 0; }
.apk-rule-del .material-symbols-outlined { font-size: 18px; }
.apk-rules-more {
  width: 100%; margin-top: 10px; padding: 8px; border-radius: 9px; cursor: pointer;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  color: var(--text-secondary); font-family: inherit; font-size: 12.5px;
}
.apk-rules-empty p  { font-size: 13px; color: var(--text-secondary); margin: 6px 0 10px; }
.apk-rules-empty ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.apk-rule-example {
  width: 100%; text-align: left; padding: 9px 11px; border-radius: 9px; cursor: pointer;
  background: var(--bg-tertiary); border: 1px dashed var(--border);
  color: var(--text-primary); font-family: inherit; font-size: 12.5px;
}
.apk-rule-example:hover { border-color: var(--primary); }
@media (max-width: 640px) {
  .apk-rules-compose { flex-wrap: wrap; }
  .apk-rules-add { width: 100%; }
}

/* [FEATURE-MYRULES-02] Run-now bar — lets the user verify a rule immediately instead of
   waiting up to an hour for the RulesCron tick. Token-driven, no invented palette. */
.apk-rules-runbar { display: flex; align-items: center; gap: 10px; padding: 4px 0 0; flex-wrap: wrap; }
.apk-rules-run {
  flex-shrink: 0; padding: 6px 12px; border-radius: 8px; cursor: pointer;
  background: var(--bg-tertiary); border: 1px solid var(--border);
  color: var(--text-primary); font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.apk-rules-run:hover:not(:disabled) { border-color: var(--primary); }
.apk-rules-run:disabled { opacity: .6; cursor: default; }
.apk-rules-runmsg { font-size: 11.5px; color: var(--text-secondary); line-height: 1.35; }