/*
===============================================================================
ASKCARBI ORGANIZED HOME MOBILE POLISH V1
===============================================================================
Keeps the approved V3 design.

Fixes:
- Category tabs running off the screen
- Search placeholder being cut off
- Tool cards hidden behind bottom navigation
- Bottom navigation labels touching
- Extra floating controls overlapping content
- Close X removed from the permanent homepage
- Better phone spacing and scrolling
===============================================================================
*/


html,
body {
  max-width: 100%;
  overflow-x: hidden;
}


body.carbi-organized-mobile-polish {
  background:
    radial-gradient(
      circle at 20% 5%,
      rgba(57, 150, 255, 0.10),
      transparent 32%
    ),
    #f7faff;
}


/*
===============================================================================
MAIN ORGANIZED HOMEPAGE
===============================================================================
*/

.carbi-organized-home,
.carbi-organized-ai-home,
.askcarbi-organized-home,
[data-carbi-organized-home],
#carbi-organized-home {
  width: 100%;
  max-width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  padding-bottom:
    calc(
      132px +
      env(safe-area-inset-bottom)
    );
}


/*
===============================================================================
REMOVE THE TOP-RIGHT X

The organized homepage is now the main homepage, so customers should not
accidentally close it and return to the old screen.
===============================================================================
*/

.carbi-organized-home-close,
.carbi-organized-close,
[data-close-organized-home],
[data-carbi-home-close],
button[aria-label="Close organized homepage"],
button[aria-label="Close Carbi homepage"] {
  display: none !important;
}


/*
===============================================================================
HEADER
===============================================================================
*/

.carbi-organized-header,
.carbi-ai-home-header,
[data-carbi-home-header] {
  padding-left:
    max(
      18px,
      env(safe-area-inset-left)
    );

  padding-right:
    max(
      18px,
      env(safe-area-inset-right)
    );

  min-height: 88px;
}


.carbi-organized-brand,
.carbi-home-brand {
  min-width: 0;
}


.carbi-organized-brand-copy,
.carbi-home-brand-copy {
  min-width: 0;
}


/*
===============================================================================
HERO
===============================================================================
*/

.carbi-organized-hero,
.carbi-ai-home-hero,
[data-carbi-home-hero] {
  padding-left: 22px;
  padding-right: 22px;
}


.carbi-organized-hero h1,
.carbi-ai-home-hero h1 {
  max-width: 620px;
  margin-right: auto;
}


/*
===============================================================================
TALK TO CARBI BUTTON
===============================================================================
*/

.carbi-organized-talk,
.carbi-talk-primary,
[data-carbi-talk] {
  width: calc(100% - 44px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  min-height: 96px;
  box-sizing: border-box;
}


/*
===============================================================================
SEARCH
===============================================================================
*/

.carbi-organized-search,
.carbi-feature-search,
[data-carbi-feature-search] {
  width: calc(100% - 44px);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}


.carbi-organized-search input,
.carbi-feature-search input,
[data-carbi-feature-search] input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-right: 18px;
}


/*
===============================================================================
CATEGORY TAB STRIP

Horizontal scrolling is intentional so more categories can be added later
without squeezing or stacking the buttons.
===============================================================================
*/

.carbi-organized-categories,
.carbi-category-strip,
.carbi-category-tabs,
[data-carbi-category-strip],
[data-carbi-categories] {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 10px;

  width: calc(100% - 32px);
  max-width: 760px;

  margin-left: auto;
  margin-right: auto;

  padding:
    10px
    4px
    14px;

  overflow-x: auto !important;
  overflow-y: hidden;

  scroll-behavior: smooth;
  scroll-snap-type: x proximity;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;

  scrollbar-width: none;
}


.carbi-organized-categories::-webkit-scrollbar,
.carbi-category-strip::-webkit-scrollbar,
.carbi-category-tabs::-webkit-scrollbar,
[data-carbi-category-strip]::-webkit-scrollbar,
[data-carbi-categories]::-webkit-scrollbar {
  display: none;
}


.carbi-organized-categories > *,
.carbi-category-strip > *,
.carbi-category-tabs > *,
[data-carbi-category-strip] > *,
[data-carbi-categories] > * {
  flex:
    0
    0
    auto !important;

  min-width: 150px;
  max-width: 190px;

  scroll-snap-align: start;
  white-space: nowrap;
}


/*
===============================================================================
TOOL CENTER
===============================================================================
*/

.carbi-organized-tools,
.carbi-tool-center,
.carbi-tools-panel,
[data-carbi-tool-center],
[data-carbi-tools] {
  width: calc(100% - 32px);
  max-width: 760px;

  margin-left: auto;
  margin-right: auto;

  box-sizing: border-box;

  padding-bottom:
    calc(
      155px +
      env(safe-area-inset-bottom)
    );
}


.carbi-tool-list,
.carbi-organized-tool-list,
[data-carbi-tool-list] {
  display: flex;
  flex-direction: column;
  gap: 12px;

  overflow: visible;
  max-height: none;
  padding-bottom: 24px;
}


.carbi-tool-card,
.carbi-organized-tool,
[data-carbi-tool] {
  position: relative;
  z-index: 1;

  width: 100%;
  min-height: 88px;

  margin: 0;

  box-sizing: border-box;
  overflow: visible;
}


.carbi-tool-card button,
.carbi-organized-tool button,
[data-carbi-tool] button {
  min-width: 64px;
  min-height: 42px;
}


/*
===============================================================================
BOTTOM NAVIGATION

Five equal columns prevent Assistant and Devices from appearing as one label.
===============================================================================
*/

.carbi-organized-bottom-nav,
.carbi-home-bottom-nav,
[data-carbi-bottom-nav] {
  position: fixed !important;

  left:
    max(
      10px,
      env(safe-area-inset-left)
    );

  right:
    max(
      10px,
      env(safe-area-inset-right)
    );

  bottom:
    calc(
      8px +
      env(safe-area-inset-bottom)
    );

  z-index: 2147482000;

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

  align-items: stretch;

  width: auto !important;
  max-width: 760px;

  margin-left: auto;
  margin-right: auto;

  gap: 4px;

  padding: 8px;

  box-sizing: border-box;

  background:
    rgba(
      255,
      255,
      255,
      0.94
    );

  border:
    1px solid
    rgba(
      33,
      112,
      232,
      0.13
    );

  border-radius: 22px;

  box-shadow:
    0 18px 45px
    rgba(
      25,
      71,
      130,
      0.16
    );

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);
}


.carbi-organized-bottom-nav button,
.carbi-home-bottom-nav button,
[data-carbi-bottom-nav] button,
.carbi-organized-bottom-nav a,
.carbi-home-bottom-nav a,
[data-carbi-bottom-nav] a {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-width: 0 !important;
  width: 100% !important;
  min-height: 70px;

  gap: 5px;

  padding:
    8px
    2px !important;

  border-radius: 16px;

  box-sizing: border-box;

  overflow: hidden;
  text-align: center;
}


.carbi-organized-bottom-nav button span,
.carbi-home-bottom-nav button span,
[data-carbi-bottom-nav] button span,
.carbi-organized-bottom-nav a span,
.carbi-home-bottom-nav a span,
[data-carbi-bottom-nav] a span {
  display: block;

  width: 100%;

  font-size: 12px !important;
  line-height: 1.1 !important;
  font-weight: 750;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/*
===============================================================================
OLD FLOATING BUTTONS AND OVERLAYS

Hide old homepage controls only while the organized homepage is open.
The Assistant Center itself remains available through the new Assistant tab.
===============================================================================
*/

body.carbi-organized-home-open
  .carbi-assistant-launcher,

body.carbi-organized-home-open
  #carbi-assistant-launcher,

body.carbi-organized-home-open
  .carbi-tools-launcher,

body.carbi-organized-home-open
  .carbi-home-launcher,

body.carbi-organized-home-open
  [data-carbi-floating-tools],

body.carbi-organized-home-open
  .hey-carbi-listening-bar:not(
    .carbi-organized-listening
  ),

body.carbi-organized-home-open
  [data-hey-carbi-status]:not(
    [data-organized-home-status]
  ) {
  display: none !important;
}


/*
===============================================================================
PHONE LAYOUT
===============================================================================
*/

@media (
  max-width: 600px
) {
  .carbi-organized-hero,
  .carbi-ai-home-hero,
  [data-carbi-home-hero] {
    padding-left: 18px;
    padding-right: 18px;
  }


  .carbi-organized-hero h1,
  .carbi-ai-home-hero h1 {
    font-size:
      clamp(
        39px,
        11vw,
        54px
      );

    line-height: 1.05;
    letter-spacing: -1.8px;
  }


  .carbi-organized-talk,
  .carbi-talk-primary,
  [data-carbi-talk] {
    width: calc(100% - 32px);
  }


  .carbi-organized-search,
  .carbi-feature-search,
  [data-carbi-feature-search] {
    width: calc(100% - 32px);
  }


  .carbi-organized-categories,
  .carbi-category-strip,
  .carbi-category-tabs,
  [data-carbi-category-strip],
  [data-carbi-categories] {
    width: calc(100% - 20px);
  }


  .carbi-organized-categories > *,
  .carbi-category-strip > *,
  .carbi-category-tabs > *,
  [data-carbi-category-strip] > *,
  [data-carbi-categories] > * {
    min-width: 146px;
  }


  .carbi-organized-tools,
  .carbi-tool-center,
  .carbi-tools-panel,
  [data-carbi-tool-center],
  [data-carbi-tools] {
    width: calc(100% - 20px);
  }


  .carbi-organized-bottom-nav button span,
  .carbi-home-bottom-nav button span,
  [data-carbi-bottom-nav] button span,
  .carbi-organized-bottom-nav a span,
  .carbi-home-bottom-nav a span,
  [data-carbi-bottom-nav] a span {
    font-size: 11px !important;
  }
}


/*
===============================================================================
VERY SMALL PHONES
===============================================================================
*/

@media (
  max-width: 380px
) {
  .carbi-organized-bottom-nav,
  .carbi-home-bottom-nav,
  [data-carbi-bottom-nav] {
    left: 5px;
    right: 5px;
    gap: 1px;
    padding: 6px;
  }


  .carbi-organized-bottom-nav button,
  .carbi-home-bottom-nav button,
  [data-carbi-bottom-nav] button,
  .carbi-organized-bottom-nav a,
  .carbi-home-bottom-nav a,
  [data-carbi-bottom-nav] a {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  .carbi-organized-bottom-nav button span,
  .carbi-home-bottom-nav button span,
  [data-carbi-bottom-nav] button span,
  .carbi-organized-bottom-nav a span,
  .carbi-home-bottom-nav a span,
  [data-carbi-bottom-nav] a span {
    font-size: 10px !important;
  }
}