/* TryGC mobile fit (2026-09-27). Phone-width fixes found by measuring each page at
 * 375px on live data: anything spilling past its card, fields cut off, controls hidden
 * behind the bottom menu. Loaded last so it wins; everything is inside the media
 * query, so desktop is untouched. Remove the <link> in index.html to roll back. */
@media (max-width: 767px) {
  /* Dashboard: the From / To date row did not wrap and pushed "To" past its card. */
  .flex.items-center:has(> input[type="date"] + span + input[type="date"]) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 8px;
    width: 100%;
  }
  .flex.items-center:has(> input[type="date"] + span + input[type="date"]) > input[type="date"] {
    width: 100%;
    min-width: 0;
  }

  /* Dashboard "furthest behind pace": a fixed 186px name column left the bar no room
   * and pushed the percentages out of the row. */
  button[title] > span[style*="min-width: 186px"] {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 1 46%;
  }
  button[title]:has(> span[style*="min-width: 186px"]) > span:last-child { flex: none; }

  /* Dashboard "Active Campaigns ↗": a text button styled as a 36px square icon button,
   * so its label and arrow spilled out of it. */
  .icon-btn.px-4 { width: auto !important; min-width: 36px; flex: none; white-space: nowrap; }

  /* Handover: the search icon sat on top of the placeholder (a global rule reset the
   * field's left padding). */
  .gc-ho-search input { padding-left: 36px !important; }

  /* Top Tier / Campaign Performance: the search field is 44px tall on phones but its
   * frame was 32px, and long campaign chips ran past their card. */
  .cp-fsearch { height: auto; min-height: 44px; min-width: 0; }
  .cp-fsearch input { background: transparent; min-width: 0; flex: 1 1 auto; }
  .cp-ins-camps { min-width: 0; max-width: 100%; }
  .cp-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

  /* Creator Reach / Creator Checklist: the header links were one 152px column that cut
   * "Onboarding team →"; lay them out two to a row across the card. The All creators
   * filters were each their own width; make them one clean full-width column. */
  .gc-reach-head .gc-reach-headbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100% !important; max-width: none !important; }
  .gc-reach-head .gc-reach-headbtns > .gc-reach-btn { width: auto !important; max-width: none !important; min-width: 0; padding-inline: 10px; font-size: 13px; white-space: normal; line-height: 1.25; }
  .gc-reach-head .gc-reach-headbtns > .gc-reach-btn:only-child { grid-column: 1 / -1; }
  .gc-rost-bar > :is(select, input), .gc-lf__field, .gc-lf__field input { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }

  /* Ops Agent inside the app (/brain): fill the space between the top bar and the
   * bottom menu, edge to edge. Its height was 100dvh minus 84px, which ignored the
   * 64px bottom menu and hid the message box and Send button behind it. */
  .gc-app-content:has(.gc-ops-agent-page) {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .gc-app-content .page-enter:has(> .gc-ops-agent-page) {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .gc-ops-agent-page { height: auto !important; flex: 1 1 auto; min-height: 0; }
  .gc-ops-agent-page > iframe { border-radius: 0; border-width: 0; }
}