/*
===============================================================================
ASKCARBI MOBILE CLEANUP V1
Prevents legacy floating launchers from stacking over the main React interface.
The underlying features remain installed.
===============================================================================
*/

@media (max-width: 820px) {

  /* Legacy floating feature launchers */
  #carbi-research-safety-launcher,
  [id*="research"][id*="launcher"],
  [class*="research"][class*="launcher"],
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Hide duplicate verification launcher after the account badge is present */
  [id*="verification"][id*="launcher"],
  [class*="verification"][class*="launcher"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Keep the primary ASKCARBI application above legacy layers */
  #root,
  .app-shell,
  .page-content {
    position: relative !important;
    z-index: 10 !important;
  }

  /* Make the new navigation accessible and readable */
  .bottom-nav {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 20000 !important;
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    width: 100% !important;
    overflow-x: auto !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

  .bottom-nav button {
    min-width: 68px !important;
    padding: 10px 4px !important;
    font-size: 11px !important;
  }

  /* Keep opened React panels above the page without stacking legacy tools */
  .app-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 60000 !important;
    overflow-y: auto !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  /* Prevent horizontal page overflow */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}


/*
===============================================================================
ASKCARBI MOBILE PRIMARY CONTROLS RESTORE V1
Restores the customer controls that were hidden by the older cleanup rules.
===============================================================================
*/
@media (max-width: 820px) {
  #hey-carbi-toggle,
  #carbi-language-change-button,
  #carbi-control-launcher,
  #install-carbi-launcher,
  #carbi-easy-use-button,
  #carbi-simple-navigation,
  .carbi-simple-navigation,
  .carbi-simple-nav,
  [class*="easy-use-launcher"],
  [class*="awc-launcher"] {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #hey-carbi-toggle {
    position: fixed !important;
    right: 12px !important;
    bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    z-index: 65000 !important;
  }
}

/*
===============================================================================
ASKCARBI MOBILE CONTROL DOCK V1
Keeps restored controls visible without stacking over Carbi or each other.
===============================================================================
*/

@media (max-width: 820px) {
  /*
   * Keep the main voice button fixed above Safari's bottom controls.
   */
  #hey-carbi-toggle {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: min(310px, calc(100vw - 40px)) !important;
    min-height: 52px !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
    z-index: 70000 !important;
    margin: 0 !important;
  }

  /*
   * Move secondary feature launchers into a clean two-column dock.
   * They remain visible and clickable without covering the avatar.
   */
  #carbi-research-safety-launcher,
  #carbi-control-launcher,
  #install-carbi-launcher,
  #carbi-language-change-button,
  #carbi-easy-use-button,
  #carbi-simple-navigation,
  .carbi-simple-navigation,
  .carbi-simple-nav,
  [class*="easy-use-launcher"],
  [class*="awc-launcher"],
  [id*="smart"][id*="launcher"],
  [id*="work"][id*="launcher"] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    z-index: auto !important;
  }

  body {
    padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
  }

  /*
   * Put floating secondary controls into a dock at the end of the page.
   */
  body::after {
    content: "";
    display: block;
    height: calc(88px + env(safe-area-inset-bottom));
  }

  #carbi-research-safety-launcher,
  #carbi-control-launcher,
  #install-carbi-launcher,
  #carbi-language-change-button,
  #carbi-easy-use-button,
  #carbi-simple-navigation,
  .carbi-simple-navigation,
  .carbi-simple-nav,
  [class*="easy-use-launcher"],
  [class*="awc-launcher"],
  [id*="smart"][id*="launcher"],
  [id*="work"][id*="launcher"] {
    min-height: 54px !important;
    border-radius: 18px !important;
  }

  /*
   * Prevent oversized launcher text from colliding.
   */
  #install-carbi-launcher,
  #carbi-language-change-button,
  #carbi-easy-use-button,
  [class*="awc-launcher"] {
    font-size: 14px !important;
    line-height: 1.15 !important;
  }
}


/*
===============================================================================
ASKCARBI NEAT BOTTOM TABS V1
Visual layout only. Existing tab functions and click handlers remain unchanged.
===============================================================================
*/

@media (max-width: 820px) {

  /*
   * Give the page enough room so the navigation never covers content.
   */
  body {
    padding-bottom:
      calc(104px + env(safe-area-inset-bottom)) !important;
  }

  /*
   * Clean bottom navigation container.
   */
  #root .bottom-nav,
  .app-shell .bottom-nav,
  .bottom-nav {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom:
      calc(8px + env(safe-area-inset-bottom)) !important;

    width: auto !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 7px 6px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 4px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;

    border:
      1px solid rgba(152, 190, 225, 0.52) !important;
    border-radius: 24px !important;

    background:
      rgba(247, 252, 255, 0.96) !important;

    -webkit-backdrop-filter:
      blur(22px) saturate(150%) !important;
    backdrop-filter:
      blur(22px) saturate(150%) !important;

    box-shadow:
      0 12px 34px rgba(32, 91, 143, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;

    z-index: 70000 !important;
  }

  .bottom-nav::-webkit-scrollbar {
    display: none !important;
  }

  /*
   * Keep every existing tab in its original functional order.
   * They are now evenly aligned like the controls at the top.
   */
  #root .bottom-nav > button,
  #root .bottom-nav > a,
  .bottom-nav > button,
  .bottom-nav > a {
    position: relative !important;
    inset: auto !important;
    transform: none !important;

    flex: 1 0 64px !important;
    min-width: 64px !important;
    max-width: 92px !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 7px 4px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    border: 0 !important;
    border-radius: 17px !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #41627f !important;
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 750 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;

    visibility: visible !important;
    pointer-events: auto !important;
  }

  /*
   * Standardize icons so none of the tabs look randomly placed.
   */
  .bottom-nav > button svg,
  .bottom-nav > button img,
  .bottom-nav > button [class*="icon"],
  .bottom-nav > a svg,
  .bottom-nav > a img,
  .bottom-nav > a [class*="icon"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    margin: 0 !important;
    object-fit: contain !important;
    font-size: 21px !important;
  }

  /*
   * Active tab uses the same neat blue treatment as the upper controls.
   */
  .bottom-nav > button.active,
  .bottom-nav > button[aria-selected="true"],
  .bottom-nav > button[data-active="true"],
  .bottom-nav > a.active,
  .bottom-nav > a[aria-current="page"] {
    color: #0878df !important;

    background:
      linear-gradient(
        180deg,
        rgba(225, 244, 255, 0.98),
        rgba(211, 235, 255, 0.94)
      ) !important;

    box-shadow:
      inset 0 0 0 1px rgba(83, 161, 226, 0.28),
      0 5px 13px rgba(49, 126, 190, 0.13) !important;
  }

  .bottom-nav > button:active,
  .bottom-nav > a:active {
    transform: scale(0.96) !important;
  }
}

/*
 * Keep the desktop layout organized without changing its functions.
 */
@media (min-width: 821px) {
  .bottom-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
}