/**
 * Jouli Mobile Polish — fixes overlaps and sizing on small screens
 */

/* Hide auto-injected Jouli feature sections sitewide */
#nl-container,
#dd-container,
#mg-carbon-visualiser,
#mg-system-configurator,
#mg-energy-map,
#mg-bill-autopsy,
#mg-roof-simulator,
#aa-container {
  display: none !important;
}

/* ── Fix Jouli pill on mobile — move higher, smaller ── */
@media (max-width: 767px) {
  #jouli-orb-wrap {
    bottom: 68px !important;
    right: 12px !important;
    z-index: 90 !important;
  }
  .jouli-orb-pill {
    padding: 6px 14px 6px 6px !important;
    gap: 8px !important;
  }
  #jouli-orb-canvas {
    width: 38px !important;
    height: 38px !important;
  }
  .jouli-orb-label {
    font-size: 12px !important;
  }

  /* Fix companion orb — hide on very small screens, reduce on medium */
  #jouli-companion {
    left: 6px !important;
  }
  .jc-orb {
    width: 18px !important;
    height: 18px !important;
  }
  .jc-tip {
    left: 26px !important;
    max-width: 200px !important;
    white-space: normal !important;
    font-size: 11px !important;
  }

  /* Energy flow canvas — smaller on mobile */
  #jouli-flow {
    display: none !important;
  }

  /* Score — hide on mobile */
  #jouli-score {
    display: none !important;
  }

  /* Savings ticker — smaller text */
  #jouli-ticker {
    font-size: 11px !important;
    padding: 4px 12px !important;
  }
  .jt-amount {
    font-size: 13px !important;
  }

  /* Social proof — move to bottom on mobile to avoid overlapping nav */
  #jouli-proof {
    top: auto !important;
    bottom: 68px !important;
    right: 8px !important;
    left: 8px !important;
    max-width: none !important;
    border-radius: 12px !important;
    z-index: 89 !important;
  }

  /* Music button — move above mobile bar */
  #jouli-music-btn {
    bottom: 68px !important;
    left: 8px !important;
    width: 32px !important;
    height: 32px !important;
  }

  /* Chat panel — full screen on mobile */
  #jouli-panel {
    bottom: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* Feature sections — tighter padding on mobile */
  .sj-wrapper, .nl-wrapper, .dd-wrapper, .aa-wrapper, .va-wrapper {
    padding: 40px 16px !important;
  }
  .sj-title, .nl-title, .dd-title, .aa-title, .va-title {
    font-size: 24px !important;
  }

  /* Savings journey — step number smaller */
  .sj-step-num {
    font-size: 28px !important;
  }
  .sj-step-body {
    padding-left: 0 !important;
  }
  .sj-bill-field {
    font-size: 24px !important;
  }
  .sj-bill-prefix {
    font-size: 24px !important;
  }

  /* Dashboard demo — 2 columns on mobile */
  .dd-metrics {
    grid-template-columns: 1fr 1fr !important;
  }
  .dd-metric-value {
    font-size: 22px !important;
  }

  /* Leaderboard stats — 2 columns */
  .nl-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .nl-stat-value {
    font-size: 20px !important;
  }

  /* Carbon visualiser cards */
  .cv-stat-card, [class*="cv-card"] {
    padding: 16px !important;
  }

  /* Virtual assessment — single column options */
  .va-options {
    grid-template-columns: 1fr !important;
  }

  /* AI audit — choices wrap */
  .aa-choices {
    gap: 8px !important;
  }
  .aa-choice {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  /* ROI chart — prevent overflow */
  #sj-roi-chart {
    max-width: 100% !important;
  }
}

/* ── Extra small screens (iPhone SE, etc) ── */
@media (max-width: 374px) {
  #jouli-companion {
    display: none !important;
  }
  .jouli-orb-label {
    display: none !important;
  }
  .sj-savings-amount {
    font-size: 36px !important;
  }
  .nl-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Remediation 2026-05-29: Jouli widget touch targets ≥44px ──
   Close/mic/send buttons were 25–36px (jt-close just 7.7×18). Enlarge
   the tap area without resizing the visible icon. */
.jt-close, #jt-close,
.jouli-close, .jouli-mic-btn, #jouli-send, .jouli-send {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Remediation 2026-05-29: declutter floating Jouli promos (sitewide) ──
   The engagement banners stacked over the footer (social proof, live feed)
   plus the full-screen cursor-trail effect. Keep only the orb launcher
   (#jouli-orb-wrap) and the geo state picker (#mg-state-picker). */
.jeng-proof, [class*="jeng-proof"],
.jeng-recent, [class*="jeng-recent"],
#jouli-cursor-trail,
#jouli-ticker,
.jeng-orb-tag,
.jeng-try-jouli {
  display: none !important;
}

/* ── Remediation 2026-05-29: mobile had TWO Jouli launchers (orb + concierge
   bar). Keep the floating orb; hide the bottom bar on mobile, and drop the
   orb to the corner (was raised to 68px to clear the now-hidden bar). ── */
@media (max-width: 767px) {
  #jouli-mobile-bar { display: none !important; }
  #jouli-orb-wrap { bottom: 16px !important; }
}