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

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