  /* ── Raport na telefonie ──────────────────────────────────────────────────
     Raport trafia do klienta linkiem z WhatsAppa albo maila, wiec otwierany
     jest przede wszystkim na telefonie. Do tej pory ten plik nie mial ani
     jednej reguly @media poza drukiem. */
  @media screen and (max-width: 700px) {
    /* Sekcje raportu maja padding 24-28 px z kazdej strony, co na ekranie
       375 px zjada spora czesc miejsca na tresc. */
    .rp-section { padding-left: 16px !important; padding-right: 16px !important; }
    /* Wiersz dwoch kafelkow zostawia tekstowi okolo 90 px: skladamy w kolumne. */
    .rp-tiles { flex-direction: column !important; }
    /* Pole pytania obok przycisku "Wyslij" ma na telefonie 117 px, czyli za
       malo, zeby cokolwiek napisac: przycisk schodzi pod spod. */
    .rp-chat-row { flex-direction: column !important; padding-left: 16px !important; padding-right: 16px !important; }
    .rp-chat-row > button { justify-content: center; height: 44px; }
    /* Radar ma 13 osi: na waskim ekranie etykiety zachodza na siebie u dolu,
       wiec wykres dostaje wiecej wysokosci. */
    .radar-box { height: 360px !important; }
    /* Blok dopasowania: kolo i tekst obok siebie zostawialy tekstowi ok. 130 px. */
    .rp-hero { padding: 20px 16px !important; gap: 16px !important; }
    .rp-hero-tekst { flex: 1 1 100% !important; }
    /* Pasujace oferty: szesc kolumn na 340 px lamalo cene i metraz na dwie
       linie, a naglowki zlewaly sie w "POKOJEPIETRO". Na telefonie kazda
       oferta to dwie linie: pokoje, pietro, metraz / cena i dopasowanie,
       rzut po prawej. */
    .rp-oferty-naglowek { display: none !important; }
    .rp-oferta {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-areas: "pokoje pietro" "metraz metraz" "cena cena" "dopas rzut" !important;
      gap: 8px; height: auto !important; padding: 12px !important;
    }
    .rp-oferta > div { min-width: 0; overflow-wrap: anywhere; }
    .rp-oferta .o-pokoje { grid-area: pokoje; }
    .rp-oferta .o-pietro { grid-area: pietro; color: #6B7280; }
    .rp-oferta .o-pietro::before { content: "Piętro: "; }
    .rp-oferta .o-metraz { grid-area: metraz; color: #6B7280; }
    .rp-oferta .o-cena { grid-area: cena; font-size: 14px; }
    .rp-oferta .o-dopas { grid-area: dopas; }
    .rp-oferta .o-rzut { grid-area: rzut; justify-self: end; }
    .rp-oferta .o-rzut a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    .rp-investment { overflow-wrap: anywhere; }
    .rp-tag { white-space: normal !important; max-width: 100%; }
    .rp-metric { min-width: 0; max-width: 100%; }
    .rp-metric > div { min-width: 0; }
    .rp-hero-tekst { width: 100%; }
    .report-preview-paper { padding: 0 !important; }
    /* Pole pytania w kolumnie: flex:1 zgniatalo je do kilkunastu pikseli. */
    .rp-chat-row > div { flex: none !important; }
  }
