/* bottom-nav.css — WP9. Mobile app-like floating bottom-nav pill.
 *
 * Ported VERBATIM from eudr-x bottom-nav.css:10-247 (gt- → ct-). Geometry,
 * clamps, transitions, z-indices and the entry keyframe are kept 1:1; ONLY the
 * colour literals change, per the navy substitution list in spec-theme §3:
 *   inactive #6b8762→#62788a · hover #253d1c→#16293d · hover wash
 *   rgba(92,120,82,.10)→rgba(82,104,120,.10) · active grad #34522a→#253d1c ⇒
 *   #1f3c54→#16293d · active glow rgba(37,61,28,.55)→rgba(22,41,61,.55) · pill
 *   border rgba(37,61,28,.08)→rgba(22,41,61,.08) · pill shadows rgba(14,29,8,…)
 *   →rgba(8,17,32,…) · dark pill rgba(22,43,14,.92)→rgba(13,27,46,.92) · dark
 *   inactive rgba(216,232,210,.6)→rgba(209,223,232,.6) · dark active grad
 *   #d8e8d2→#b6cfac ⇒ #d1dfe8→#aac4d4 · dark active text #162b0e→#0b1724 · step
 *   chip rgba(92,120,82,.18)→rgba(82,104,120,.18) · badge #c93a3a kept (danger).
 *
 * Shown by CSS only at ≤600px — the same breakpoint where layout.css hides the
 * sidebar. core/bottomnav.js builds the DOM once from the rendered sidebar
 * links (zero duplicate config). The per-component prefers-reduced-motion block
 * from the eudr-x source is intentionally dropped (build-plan §0.8: motion is
 * globally neutralised in tokens.css, no per-component blocks). The eudr-x
 * `.chat-floating-btn` nudge is dropped too (chemtrust has no chat FAB). */

/* Hide by default — only visible on narrow viewports */
.ct-bottomnav {
  display: none;
}

@media (max-width: 600px) {
  .ct-bottomnav {
    display: block;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 1500;
    width: min(calc(100vw - 24px), 520px);
    pointer-events: none; /* let pill + children receive events */
  }
  .ct-bottomnav__pill {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(22, 41, 61, 0.08);
    box-shadow:
      0 18px 40px -16px rgba(8, 17, 32, 0.45),
      0 6px 16px -8px rgba(8, 17, 32, 0.25),
      0 1px 0 rgba(255, 255, 255, 0.8) inset;
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    animation: ct-bottomnav-in 0.4s cubic-bezier(0.22, 0.8, 0.35, 1) both;
  }
  @keyframes ct-bottomnav-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .ct-bottomnav__item {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px; /* inactive = round icon well */
    height: 44px;
    padding: 0 10px;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: #62788a;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition:
      background 0.22s ease,
      color 0.22s ease,
      width 0.22s ease,
      padding 0.22s ease,
      flex-grow 0.22s ease,
      transform 0.12s ease;
  }
  .ct-bottomnav__item:active:not(:disabled) {
    transform: scale(0.96);
  }
  .ct-bottomnav__item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .ct-bottomnav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  .ct-bottomnav__icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
  }
  .ct-bottomnav__label {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
    transition: max-width 0.24s ease, opacity 0.2s ease 0.04s;
  }
  /* Active item — expands, gets the navy treatment */
  .ct-bottomnav__item--active {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 0 14px;
    color: #f5f8fb;
    background: linear-gradient(180deg, #1f3c54 0%, #16293d 100%);
    box-shadow:
      0 10px 22px -10px rgba(22, 41, 61, 0.55),
      0 1px 0 rgba(255, 255, 255, 0.15) inset;
  }
  .ct-bottomnav__item--active .ct-bottomnav__icon svg {
    stroke-width: 2.1;
  }
  .ct-bottomnav__item--active .ct-bottomnav__label {
    max-width: 220px;
    opacity: 1;
  }
  .ct-bottomnav__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(82, 104, 120, 0.18);
    color: currentColor;
    font-size: 0.78rem;
    font-weight: 800;
  }
  .ct-bottomnav__item--active .ct-bottomnav__step {
    background: rgba(255, 255, 255, 0.2);
  }
  .ct-bottomnav__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #c93a3a;
    color: #fff;
    font-size: 0.64rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
  }
  @media (hover: hover) {
    .ct-bottomnav__item:hover:not(.ct-bottomnav__item--active):not(:disabled) {
      color: #16293d;
      background: rgba(82, 104, 120, 0.1);
    }
  }
  /* Push main content up so it doesn't slide under the floating pill.
     (mobile.css owns the ≤600 top/left/right padding; this longhand owns the
     bottom so the two never clobber each other.) */
  .ct-main {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ═══ Dark mode ═══  — pill inverts: dark glass pill, LIGHT active tab */
body.dark-mode .ct-bottomnav__pill {
  background: rgba(13, 27, 46, 0.92);
  border-color: rgba(209, 223, 232, 0.1);
  box-shadow:
    0 18px 40px -16px rgba(0, 0, 0, 0.7),
    0 6px 16px -8px rgba(0, 0, 0, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
body.dark-mode .ct-bottomnav__item {
  color: rgba(209, 223, 232, 0.6);
}
body.dark-mode .ct-bottomnav__item--active {
  color: #0b1724;
  background: linear-gradient(180deg, #d1dfe8 0%, #aac4d4 100%);
  box-shadow:
    0 10px 22px -10px rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.25) inset;
}
body.dark-mode .ct-bottomnav__step {
  background: rgba(209, 223, 232, 0.14);
}
body.dark-mode .ct-bottomnav__item--active .ct-bottomnav__step {
  background: rgba(13, 27, 46, 0.2);
}
body.dark-mode .ct-bottomnav__badge {
  box-shadow: 0 0 0 2px rgba(13, 27, 46, 0.92);
}
@media (hover: hover) {
  body.dark-mode .ct-bottomnav__item:hover:not(.ct-bottomnav__item--active):not(:disabled) {
    color: #d1dfe8;
    background: rgba(209, 223, 232, 0.08);
  }
}