/* ---- Sort chips (TD-02): interaction states the inline styles can't provide ---- */
.aict-sort-chip{transition:background .15s,border-color .15s,color .15s}
.aict-sort-chip:hover{border-color:#4f46e5 !important;color:#4338ca !important}
.aict-sort-chip.is-active:hover{color:#fff !important}
.aict-sort-chip:focus-visible{outline:3px solid #4338ca;outline-offset:2px}

/* ============================ DARK MODE ============================ */
html[data-theme="dark"]{
  /* contrast block (HP-02) */
}
html[data-theme="dark"] .aict-contrast-block h2{color:#f1f5f9 !important}
html[data-theme="dark"] .aict-contrast-block p{color:#cbd5e1 !important}
html[data-theme="dark"] .aict-contrast-block > div > div{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] .aict-contrast-block li{color:#94a3b8 !important}
html[data-theme="dark"] .aict-contrast-block li[style*="font-weight:500"],
html[data-theme="dark"] .aict-contrast-block .aict-us-item{color:#e2e8f0 !important}

/* sort chips + filter selects + pagination (TD-07) */
html[data-theme="dark"] .aict-sort-chip{background:#1e293b !important;border-color:#334155 !important;color:#cbd5e1 !important}
html[data-theme="dark"] .aict-sort-chip.is-active{background:#4f46e5 !important;border-color:#4f46e5 !important;color:#fff !important}
html[data-theme="dark"] .aict-sort-chip:hover{border-color:#6366f1 !important}

/* floating rating widget (A11Y-DARK / TP-03) */
html[data-theme="dark"] #aict-rating-widget{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-head{color:#cbd5e1 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-avg-num{color:#f1f5f9 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-count{color:#94a3b8 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-star{color:#94a3b8 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-close{color:#94a3b8 !important}

/* usage badge (A11Y-DARK) — already greenish; just lift text/border on dark */
html[data-theme="dark"] .aict-usage-badge{background:rgba(34,197,94,.16) !important;border-color:rgba(34,197,94,.4) !important;color:#86efac !important}

/* "Continue with your result" chain panel (A11Y-DARK / TP-03) */
html[data-theme="dark"] #aict-chain-next{background:rgba(99,102,241,.12) !important;border-color:rgba(99,102,241,.35) !important}
html[data-theme="dark"] #aict-chain-next h3{color:#c7d2fe !important}
html[data-theme="dark"] #aict-chain-next .aict-chain-sub{color:#94a3b8 !important}
html[data-theme="dark"] .aict-chain-card{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] .aict-chain-card .aict-chain-label{color:#e2e8f0 !important}
html[data-theme="dark"] .aict-chain-prefill-note{background:rgba(34,197,94,.14) !important;color:#86efac !important}

/* collections Save popover (cohesion) */
html[data-theme="dark"] #aict-collect-btn,
html[data-theme="dark"] #aict-collect-pop{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0 !important}
html[data-theme="dark"] #aict-collect-pop h4{color:#f1f5f9 !important}
html[data-theme="dark"] #aict-collect-pop .aict-col-row{color:#cbd5e1 !important}

/* blog archive cards (BL): default-dark page had near-black hardcoded titles */
html[data-theme="dark"] .aict-blog-card h2,
html[data-theme="dark"] .aict-blog-card h2 a,
html[data-theme="dark"] .aict-blog-card .aict-blog-card-title{color:#f1f5f9 !important}
html[data-theme="dark"] .aict-blog-card .aict-blog-card-meta,
html[data-theme="dark"] .aict-blog-card time,
html[data-theme="dark"] .aict-blog-card .aict-blog-card-cat{color:#94a3b8 !important}

/* ---- FLOAT (TP-02): bring 2026 fixed widgets into the z-ladder ----
   They shipped at z 9997-9999 (modal/critical-alert layer) → covered the chat
   launcher + each other. Drop to the FAB tier; on mobile clear the bottom-right
   chat launcher / sticky run bar. */
#aict-rating-widget{z-index:var(--aict-z-fab,1200) !important}
#aict-collect-btn{z-index:var(--aict-z-fab,1200) !important}
#aict-collect-pop{z-index:calc(var(--aict-z-fab,1200) + 10) !important}
@media (max-width:640px){
  #aict-rating-widget{bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;right:.75rem !important}
  #aict-collect-btn{bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important}
  #aict-collect-pop{bottom:calc(140px + env(safe-area-inset-bottom,0px)) !important}
}

/* ---- Wave 3 dark sweep ---- */
/* /tools/ filter controls + pagination + no-results (TD-05/TD-07) */
html[data-theme="dark"] .aict-search-input,
html[data-theme="dark"] .aict-category-select{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0 !important}
html[data-theme="dark"] .aict-pagination a{background:#1e293b !important;border-color:#334155 !important;color:#cbd5e1 !important}
html[data-theme="dark"] .aict-pagination .active{background:#4f46e5 !important;border-color:#4f46e5 !important;color:#fff !important}
html[data-theme="dark"] .aict-pagination .aict-page-gap{color:#64748b !important}
html[data-theme="dark"] .aict-no-results{color:#cbd5e1 !important}
.aict-no-results{text-align:center;padding:2rem 1rem}
/* compare page (CMP-DARK) */
html[data-theme="dark"] .aict-cmp-card,
html[data-theme="dark"] .aict-cmp-related-card,
html[data-theme="dark"] .aict-cmp-hero-tool,
html[data-theme="dark"] .aict-cmp-cat-group{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0 !important}
html[data-theme="dark"] .aict-cmp-card-desc,
html[data-theme="dark"] .aict-cmp-cat-label{color:#94a3b8 !important}
html[data-theme="dark"] .aict-cmp-hdr,
html[data-theme="dark"] .aict-cmp-hdr *{color:#f1f5f9 !important}
html[data-theme="dark"] .aict-cmp-howto li{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] .aict-cmp-howto li strong{color:#f1f5f9 !important}
html[data-theme="dark"] .aict-cmp-howto li span:last-child{color:#cbd5e1 !important}
/* workflows marketplace (WF-DARK) */
html[data-theme="dark"] .aict-wf-community-card,
html[data-theme="dark"] .aict-wf-cta-banner{background:#1e293b !important;border-color:#334155 !important;color:#e2e8f0 !important}
html[data-theme="dark"] .aict-wf-cat-chip{background:#1e293b !important;border-color:#334155 !important;color:#cbd5e1 !important}
/* [a11y-axe 2026-06-04] /workflows/ (and other aict-cv2) pages render on the dark #0f172a body
   in the dark/dark-pref state, but the hero h1/intro + section headings keep light-theme dark
   inline colours (#1e293b/#64748b, forced to #0B1B35/#334155 by the "Nuclear" heading sweep) ->
   dark-on-dark invisible. Lighten them in the dark indicators ONLY (resolved-light pages keep
   their dark text on the now-light bg per the gated rules below). */
html[data-theme="dark"] body.aict-cv2 #main [style*="color:#1e293b"],
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 #main [style*="color:#1e293b"],
html[data-theme="dark"] body.aict-cv2 .aict-wf-mp-v3-h2,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .aict-wf-mp-v3-h2{color:#f1f5f9 !important;-webkit-text-fill-color:#f1f5f9 !important}
html[data-theme="dark"] body.aict-cv2 #main [style*="color:#64748b"],
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 #main [style*="color:#64748b"]{color:#cbd5e1 !important;-webkit-text-fill-color:#cbd5e1 !important}

/* ---- PR-DARK: restore dark mode on /pricing/ ----
   ~40 inline !important rescue blocks force `body.aict-cv2` + `.pricing-card`
   to #fff even when the user's pref is dark (body keeps .aict-theme-pref-dark).
   These higher-specificity dark rules win back the dark path WITHOUT touching
   the rescue blocks. Light mode is untouched (gated to dark indicators). */
html[data-theme="dark"] body.aict-cv2,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2{background:#0f172a !important}
html[data-theme="dark"] body.aict-cv2 .pricing-card,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] body.aict-cv2 .pricing-card .plan-name,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card .plan-name,
html[data-theme="dark"] body.aict-cv2 .pricing-card .price-amount,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card .price-amount,
html[data-theme="dark"] body.aict-cv2 .pricing-card h2,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card h2,
html[data-theme="dark"] body.aict-cv2 .pricing-card h3,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card h3{color:#f1f5f9 !important}
html[data-theme="dark"] body.aict-cv2 .pricing-card .price-period,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card .price-period,
html[data-theme="dark"] body.aict-cv2 .pricing-card .plan-features,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card .plan-features,
html[data-theme="dark"] body.aict-cv2 .pricing-card .plan-features li,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card .plan-features li,
html[data-theme="dark"] body.aict-cv2 .pricing-card p,
html:not([data-theme="light"]) body.aict-theme-pref-dark.aict-cv2 .pricing-card p{color:#cbd5e1 !important}

/* ---- Wave 4/5 small wins ---- */
/* HP-04: mobile intent-chips scroll with no fade → look cut off / undiscoverable */
@media (max-width:640px){
  .aict-intent-chips{-webkit-mask-image:linear-gradient(to right,#000 86%,transparent);mask-image:linear-gradient(to right,#000 86%,transparent)}
}
/* HP-07: hero H1 hardcoded <br> wraps badly across 18 locales — balance the wrap */
.hero-title{text-wrap:balance}
/* HP-08/09: consistent focus-visible on hero/intent/contrast CTAs + input ring */
.aict-hero-search-btn:focus-visible,.aict-intent-submit:focus-visible,.aict-contrast-block a:focus-visible{outline:3px solid #4338ca;outline-offset:2px}
.aict-intent-input-wrap:focus-within,.aict-hero-search-wrap:focus-within{outline:2px solid rgba(79,70,229,.55);outline-offset:1px;border-radius:10px}
.aict-contrast-block a{transition:filter .15s,transform .15s}
.aict-contrast-block a:hover{filter:brightness(1.08);transform:translateY(-1px)}
/* CMP-VS: VS pill used padding-top:4rem to fake-center → misaligns on unequal cards */
.aict-cmp-vs-sep{padding-top:0 !important;align-self:center !important}
/* PR-ACCENT: stale orange pricing accent → indigo brand */
:root{--pricing-accent-hover:#4338ca}
/* ===== CONTRAST TAIL (WCAG AA, 2026-06-03 audit F3/F4/F7/F8) ===== */
/* F3: rating "Thanks" #10b981 (2.54:1 on white) → emerald-700 / dark emerald-400 */
#aict-rating-widget .aict-rw-thanks{color:#047857 !important}
html[data-theme="dark"] #aict-rating-widget .aict-rw-thanks{color:#34d399 !important}
/* F8: empty rating stars #d1d5db (1.47:1) → readable gray (gold still applies on hover/selected) */
#aict-rating-widget .aict-rw-star{color:#6b7280}
/* F4: collections save flash #16a34a (3.30:1) → emerald-700 / dark emerald-400 */
#aict-collect-msg{color:#047857 !important}
html[data-theme="dark"] #aict-collect-msg{color:#4ade80 !important}
/* F7: breadcrumb separator #cbd5e1 on #f8fafc (1.42:1) → slate-500; theme-aware bar on dark */
.aict-bc-sep,.aict-breadcrumbs .aict-bc-sep,.aict-breadcrumbs-wrap .aict-bc-sep{color:#64748b !important}
html[data-theme="dark"] .aict-breadcrumbs-wrap,html[data-theme="dark"] .aict-breadcrumbs{background:#1e293b !important;border-color:#334155 !important}
html[data-theme="dark"] .aict-breadcrumbs,html[data-theme="dark"] .aict-breadcrumbs a{color:#cbd5e1 !important}
html[data-theme="dark"] .aict-bc-sep{color:#94a3b8 !important}
/* F5: collections empty-state (was inline color:#94a3b8, 2.56:1 light) → themed class */
.aict-collect-empty{color:#64748b}
html[data-theme="dark"] .aict-collect-empty{color:#94a3b8}


/* ============================================================
   AICT-IMAGE-GRID-ASPECT-RATIO-20260520
   CLS prevention: reserve space for image grids before
   JS hydration / lazy image load.
   ============================================================ */

/* ------------------------------------------------------------
   /news/  — aict-news-grid populated by news-hub.js
   Skeleton cards (6 empty divs) are removed by clearCards()
   then real cards appended. Reserving the GRID container at
   the expected hydrated height prevents the document-flow
   shift when below-the-fold content reflows.
   ------------------------------------------------------------ */
.aict-news-grid {
    contain: layout style;
}
/* Mobile single-column: 6 cards × ~460px + gaps */
@media (max-width: 600px) {
    .aict-news-grid {
        min-height: 2900px;
    }
}
/* Tablet 2-col: 3 rows × ~480px */
@media (min-width: 601px) and (max-width: 1024px) {
    .aict-news-grid {
        min-height: 1500px;
    }
}
/* Desktop 3-col: 2 rows × ~500px = ~1050px; add buffer for hero. */
@media (min-width: 1025px) {
    .aict-news-grid {
        min-height: 1180px;
    }
}

/* Skeleton placeholders: match hydrated card footprint
   so removal+append doesn't change grid height. */
.aict-news-card.aict-news-skeleton {
    min-height: 460px;
    background: linear-gradient(180deg, #f3f4f6 0%, #f3f4f6 56.25%, #ffffff 56.25%, #ffffff 100%);
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
}

/* Hydrated card image wrap: always 16:9 with neutral bg. */
.aict-news-card-img-wrap {
    aspect-ratio: 16 / 9;
    min-height: 180px;
    background: #f3f4f6;
    overflow: hidden;
    display: block;
    width: 100%;
}
.aict-news-card-img-wrap > .aict-news-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Placeholder (source-logo) variant: keep wrap reserved. */
.aict-news-card-img-wrap.aict-news-placeholder-wrap {
    aspect-ratio: 16 / 9;
    min-height: 180px;
}
.aict-news-card-img-wrap .aict-news-source-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: auto;
}

/* Hero (featured) card: larger 16:9 image, eager loaded. */
.aict-news-hero .aict-news-card-img-wrap {
    aspect-ratio: 16 / 9;
    min-height: 240px;
}

/* ------------------------------------------------------------
   /tools/  — aict-bento-grid + aict-tool-card
   Cards have no images but have variable text length; mobile
   paginate=12 hides cards via JS post-init causing layout shift.
   Reserve card min-height + cap grid container.
   ------------------------------------------------------------ */
.aict-bento-grid {
    contain: layout style;
}
.aict-bento-grid > .aict-card-link-wrap {
    min-height: 180px;
}
.aict-bento-grid .aict-tool-card {
    min-height: 180px;
    box-sizing: border-box;
}
.aict-bento-grid .aict-tool-card.aict-bento-lg {
    min-height: 220px;
}
/* Mobile-only grid reservation; desktop renders all cards
   in markup so no min-height needed. */
@media (max-width: 600px) {
    .aict-bento-grid {
        min-height: 2200px; /* 12 cards × 180px + gaps */
    }
}

/* ------------------------------------------------------------
   /pricing/ — supplement existing aict-cls-reservations with
   sections that were missing min-height.
   ------------------------------------------------------------ */
.aict-pcro-calc-grid {
    min-height: 400px;
    contain: layout style;
}
@media (max-width: 768px) {
    .aict-pcro-calc-grid {
        min-height: 720px;
    }
}
.aict-cro-faq-grid {
    min-height: 480px;
    contain: layout style;
}
@media (max-width: 768px) {
    .aict-cro-faq-grid {
        min-height: 900px;
    }
}
.aict-plm-card {
    min-height: 200px;
    contain: layout style;
}
.aict-pcro-payback-grid {
    min-height: 240px;
    contain: layout style;
}

/* ------------------------------------------------------------
   /tools-ai-image-generator/  (and other image-output tools) —
   gallery cards + generated-img placeholder.
   ------------------------------------------------------------ */
.aict-gallery-grid {
    min-height: 320px;
    contain: layout style;
}
.aict-gallery-card {
    min-height: 280px;
    box-sizing: border-box;
}
.aict-gallery-card img,
.aict-gallery-card .aict-gallery-thumb {
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
    min-height: 200px;
    object-fit: cover;
    display: block;
    width: 100%;
}
/* Image-output wrap: aspect 1:1, fills on result. */
.aict-image-output-wrap,
.aict-image-preview-wrap {
    aspect-ratio: 1 / 1;
    min-height: 280px;
    background: #f3f4f6;
    contain: layout style;
}
#aict-generated-img.aict-generated-img {
    aspect-ratio: 1 / 1;
    min-height: 280px;
    object-fit: contain;
    background: #f3f4f6;
}
/* Prompt library grid — variable card heights cause CLS. */
.aict-prompt-lib-grid {
    min-height: 280px;
    contain: layout style;
}
.aict-prompt-lib-item {
    min-height: 100px;
}
/* In-line modules grid (ilm) for image tools. */
.aict-ilm-grid {
    min-height: 240px;
    contain: layout style;
}

/* ------------------------------------------------------------
   /agents/ — aict-agents-grid hydrated by agent-workflows.js
   The initial render shows .aict-agents-loading (spinner only).
   When ~15 cards arrive, the grid grows ~3000px on mobile,
   shifting all content below the fold. Reserve a height on
   the grid container that holds the expected hydrated size,
   so the shift happens before viewport-tracked layout
   stabilizes. CARDS themselves don't get min-height (causes
   later reflow when SVG icons paint at variable widths).
   ------------------------------------------------------------ */
.aict-agents-grid {
    contain: layout style;
}
@media (max-width: 600px) {
    .aict-agents-grid {
        /* ~15 cards single-column × ~200px each + 16px gaps */
        min-height: 3200px;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .aict-agents-grid {
        /* ~8 rows × 2 cols × ~200px */
        min-height: 1700px;
    }
}
@media (min-width: 1025px) {
    .aict-agents-grid {
        /* ~5 rows × 3-4 cols × ~200px */
        min-height: 1100px;
    }
}

/* ============================================================
   END AICT-IMAGE-GRID-ASPECT-RATIO-20260520
   ============================================================ */

/* [v4.16.80hm +theme-single-mode-dark 2026-05-09 Q3-batch-62.4] auto-migrated hex literals to var(--aict-*) tokens */
/**
 * AICT Mobile-First — Touch Runner Optimizations
 * @since 1.73.0
 */

/* ─── Prevent horizontal overflow from off-screen elements ─── */
html, body {
  overflow-x: hidden;
}

/* ─── Touch targets ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Minimum 44×44px touch targets for all interactive elements */
  .aict-run-btn,
  .aict-copy-btn,
  .aict-export-btn,
  button[id*="aict"],
  .aict-btn-sm {
    min-height: 44px;
    min-width: 44px;
  }

  /* Tool form inputs — larger on mobile */
  .aict-tool-textarea,
  textarea[class*="aict"],
  .aict-input,
  input[class*="aict"] {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
    padding: 14px !important;
  }

  /* Agent runner: stack columns */
  .aict-detail-runner {
    grid-template-columns: 1fr !important;
  }

  /* Wider step pills on mobile */
  .aict-detail-step-pill {
    min-width: unset !important;
    font-size: 12px !important;
  }
}

/* ─── Sticky Run button (mobile) ───────────────────────────── */
@media (max-width: 768px) {
  .aict-sticky-run-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    background: var(--aict-bg);
    border-top: 1px solid var(--aict-border);
    padding: 12px 16px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 10px;
    align-items: center;
  }

  .aict-sticky-run-bar .aict-run-btn {
    flex: 1;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    height: 48px;
    background: #7c3aed;
    color: var(--aict-bg, #fff);
    border: none;
    cursor: pointer;
  }

  .aict-sticky-run-bar .aict-run-btn:disabled {
    background: #a78bfa;
    cursor: not-allowed;
  }

  /* Dark mode adjustments for sticky run bar */
  [data-theme="dark"] .aict-sticky-run-bar {
    background: var(--aict-bg-card);
    border-top-color: var(--aict-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
  }

  [data-theme="dark"] .aict-sticky-run-bar .aict-run-btn {
    background: #818cf8;
  }

  [data-theme="dark"] .aict-sticky-run-bar .aict-run-btn:disabled {
    background: #4c1d95;
  }

  /* Prevent page content from being hidden behind sticky bar */
  .aict-tool-page-body,
  .aict-detail-page {
    padding-bottom: 80px !important;
  }
}

/* ─── Tool page mobile layout ───────────────────────────────── */
@media (max-width: 600px) {
  .aict-tool-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }

  .aict-results-section {
    padding: 16px !important;
  }

  /* Hide labels, show placeholder only on very small screens */
  .aict-field-label {
    font-size: 13px !important;
  }

  /* Sharing / export bar: horizontal scroll */
  .aict-share-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
}

/* ─── Swipe-friendly horizontal tabs ───────────────────────── */
@media (max-width: 768px) {
  .aict-search-tabs,
  .aict-tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
  }

  .aict-search-tabs::-webkit-scrollbar,
  .aict-tab-bar::-webkit-scrollbar {
    display: none;
  }

  .aict-search-tab,
  .aict-tab {
    flex-shrink: 0;
  }
}

/* ─── Agents page — mobile step flow ───────────────────────── */
@media (max-width: 768px) {
  .aict-agents-hero h1 {
    font-size: 1.6rem !important;
  }

  .aict-agents-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Reduce motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Floating chat/WhatsApp button positioning ────────────────── */
/* Desktop: move above compare bar and other fixed elements */
.whatsapp-float,
.floating-chat-btn,
[class*="whatsapp"],
[class*="chat-float"] {
  bottom: 80px !important;
  z-index: 9990 !important; /* below compare bar (9998), below modals */
}

/* Mobile: smaller, tucked right, above sticky nav */
@media (max-width: 768px) {
  .whatsapp-float,
  .floating-chat-btn,
  [class*="whatsapp"],
  [class*="chat-float"] {
    bottom: 80px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* Hide floating chat on pages with a contact form */
.landing-page-contact .whatsapp-float,
.landing-page-contact .floating-chat-btn,
.landing-page-contact [class*="whatsapp"],
.landing-page-contact [class*="chat-float"] {
  display: none !important;
}