/*
===============================================================================
ASKCARBI NATIVE HOMEPAGE MOBILE REPAIR V4.1
===============================================================================
Repairs the V4 narrow-column mobile layout without changing button actions.
===============================================================================
*/


/*
 * The original React container may use a horizontal grid or flex layout.
 * Force all generated category sections to stack vertically.
 */
body.carbi-native-future-v4
.carbi-native-home-shell-v4 {
  display:
    block !important;

  grid-template-columns:
    none !important;

  grid-auto-flow:
    row !important;

  flex-direction:
    column !important;

  align-items:
    stretch !important;

  width:
    100% !important;

  max-width:
    920px !important;

  min-width:
    0 !important;

  overflow:
    visible !important;
}


body.carbi-native-future-v4
.carbi-native-section-v4 {
  display:
    block !important;

  position:
    relative !important;

  float:
    none !important;

  clear:
    both !important;

  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  height:
    auto !important;

  min-height:
    0 !important;

  margin:
    14px 0 !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;
}


/*
 * Section titles remain horizontal and readable.
 */
body.carbi-native-future-v4
.carbi-native-section-title-v4 {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    center !important;

  justify-content:
    space-between !important;

  width:
    100% !important;

  min-width:
    0 !important;
}


body.carbi-native-future-v4
.carbi-native-section-title-v4 > div {
  flex:
    1 1 auto !important;

  min-width:
    0 !important;
}


body.carbi-native-future-v4
.carbi-native-section-title-v4 strong,
body.carbi-native-future-v4
.carbi-native-section-title-v4 span {
  display:
    block !important;

  width:
    auto !important;

  max-width:
    100% !important;

  white-space:
    normal !important;

  word-break:
    normal !important;

  overflow-wrap:
    normal !important;

  writing-mode:
    horizontal-tb !important;

  text-orientation:
    mixed !important;
}


/*
 * Every section gets a normal two-column card grid on phones.
 */
body.carbi-native-future-v4
.carbi-native-tool-grid-v4 {
  display:
    grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  grid-auto-flow:
    row !important;

  grid-auto-columns:
    auto !important;

  gap:
    10px !important;

  align-items:
    stretch !important;

  justify-items:
    stretch !important;

  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  overflow:
    visible !important;
}


/*
 * V4 sometimes assigned card styling to both a React wrapper and its button.
 * JavaScript marks those outer wrappers so they no longer create narrow cards.
 */
body.carbi-native-future-v4
.carbi-native-wrapper-v41 {
  display:
    contents !important;

  width:
    auto !important;

  min-width:
    0 !important;

  max-width:
    none !important;

  height:
    auto !important;

  min-height:
    0 !important;

  padding:
    0 !important;

  margin:
    0 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    none !important;

  box-shadow:
    none !important;
}


body.carbi-native-future-v4
.carbi-native-wrapper-v41::before,
body.carbi-native-future-v4
.carbi-native-wrapper-v41::after {
  display:
    none !important;
}


/*
 * Actual clickable tool cards.
 */
body.carbi-native-future-v4
.carbi-native-real-card-v41 {
  display:
    grid !important;

  grid-template-columns:
    46px minmax(0, 1fr) !important;

  grid-template-rows:
    auto auto !important;

  align-content:
    center !important;

  align-items:
    center !important;

  column-gap:
    10px !important;

  row-gap:
    3px !important;

  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    104px !important;

  height:
    auto !important;

  padding:
    12px !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;

  writing-mode:
    horizontal-tb !important;

  text-orientation:
    mixed !important;

  white-space:
    normal !important;

  word-break:
    normal !important;

  overflow-wrap:
    normal !important;
}


/*
 * Stop all letters from stacking vertically.
 */
body.carbi-native-future-v4
.carbi-native-real-card-v41 *,
body.carbi-native-future-v4
.carbi-native-tile-v4 * {
  writing-mode:
    horizontal-tb !important;

  text-orientation:
    mixed !important;

  word-break:
    normal !important;

  overflow-wrap:
    normal !important;

  white-space:
    normal !important;

  max-width:
    100% !important;
}


body.carbi-native-future-v4
.carbi-native-real-card-v41 h1,
body.carbi-native-future-v4
.carbi-native-real-card-v41 h2,
body.carbi-native-future-v4
.carbi-native-real-card-v41 h3,
body.carbi-native-future-v4
.carbi-native-real-card-v41 strong {
  grid-column:
    2 !important;

  width:
    auto !important;

  min-width:
    0 !important;

  font-size:
    14px !important;

  line-height:
    1.12 !important;

  text-align:
    left !important;

  letter-spacing:
    -0.02em !important;
}


body.carbi-native-future-v4
.carbi-native-real-card-v41 p,
body.carbi-native-future-v4
.carbi-native-real-card-v41 small {
  grid-column:
    2 !important;

  width:
    auto !important;

  min-width:
    0 !important;

  margin:
    2px 0 0 !important;

  font-size:
    10.5px !important;

  line-height:
    1.25 !important;

  text-align:
    left !important;
}


body.carbi-native-future-v4
.carbi-native-real-card-v41 img {
  grid-column:
    1 !important;

  grid-row:
    1 / span 2 !important;

  width:
    42px !important;

  height:
    42px !important;

  max-width:
    42px !important;

  max-height:
    42px !important;

  object-fit:
    contain !important;
}


/*
 * Single cards such as Business Assistant and Auto Help should not become
 * extremely wide. They stay in the first normal grid column.
 */
body.carbi-native-future-v4
.carbi-native-tool-grid-v4
> .carbi-native-real-card-v41:only-child {
  grid-column:
    1 / -1 !important;

  max-width:
    none !important;

  min-height:
    96px !important;
}


/*
 * Keep fixed controls from blocking the final section.
 */
body.carbi-native-future-v4
#root {
  padding-bottom:
    calc(
      210px +
      env(safe-area-inset-bottom)
    ) !important;
}


body.carbi-native-future-v4
.carbi-native-home-shell-v4 {
  padding-bottom:
    calc(
      220px +
      env(safe-area-inset-bottom)
    ) !important;
}


body.carbi-native-future-v4
.carbi-native-listening-v4 {
  left:
    12px !important;

  right:
    145px !important;

  bottom:
    calc(
      96px +
      env(safe-area-inset-bottom)
    ) !important;

  width:
    auto !important;

  max-width:
    none !important;

  transform:
    none !important;

  min-height:
    48px !important;

  box-sizing:
    border-box !important;
}


body.carbi-native-future-v4
.carbi-native-assistant-v4 {
  right:
    12px !important;

  bottom:
    calc(
      96px +
      env(safe-area-inset-bottom)
    ) !important;

  width:
    130px !important;

  max-width:
    130px !important;
}


body.carbi-native-future-v4
.carbi-native-bottom-nav-v4 {
  left:
    10px !important;

  right:
    86px !important;

  bottom:
    calc(
      10px +
      env(safe-area-inset-bottom)
    ) !important;

  width:
    auto !important;

  max-width:
    none !important;
}


body.carbi-native-future-v4
.carbi-native-home-launch-v4 {
  right:
    10px !important;

  bottom:
    calc(
      10px +
      env(safe-area-inset-bottom)
    ) !important;
}


/*
 * Narrow iPhone sizes.
 */
@media (
  max-width:
  390px
) {
  body.carbi-native-future-v4
  .carbi-native-section-v4 {
    padding:
      10px !important;
  }

  body.carbi-native-future-v4
  .carbi-native-tool-grid-v4 {
    gap:
      8px !important;
  }

  body.carbi-native-future-v4
  .carbi-native-real-card-v41 {
    grid-template-columns:
      38px minmax(0, 1fr) !important;

    column-gap:
      8px !important;

    min-height:
      98px !important;

    padding:
      10px !important;
  }

  body.carbi-native-future-v4
  .carbi-native-real-card-v41 img {
    width:
      36px !important;

    height:
      36px !important;

    max-width:
      36px !important;

    max-height:
      36px !important;
  }

  body.carbi-native-future-v4
  .carbi-native-real-card-v41 h1,
  body.carbi-native-future-v4
  .carbi-native-real-card-v41 h2,
  body.carbi-native-future-v4
  .carbi-native-real-card-v41 h3,
  body.carbi-native-future-v4
  .carbi-native-real-card-v41 strong {
    font-size:
      13px !important;
  }
}


/*
 * Very narrow screens use one card per row rather than vertical lettering.
 */
@media (
  max-width:
  330px
) {
  body.carbi-native-future-v4
  .carbi-native-tool-grid-v4 {
    grid-template-columns:
      minmax(0, 1fr) !important;
  }

  body.carbi-native-future-v4
  .carbi-native-real-card-v41 {
    min-height:
      88px !important;
  }
}


/*
 * Tablet and desktop.
 */
@media (
  min-width:
  740px
) {
  body.carbi-native-future-v4
  .carbi-native-tool-grid-v4 {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    gap:
      14px !important;
  }

  body.carbi-native-future-v4
  .carbi-native-real-card-v41 {
    min-height:
      116px !important;
  }
}