/* Flux AI navigation inspired by the supplied floating capsule reference. */
:root {
  --dock-ink: #25343e;
  --dock-muted: #5d717c;
  --dock-accent: #0b777b;
  --dock-surface: rgba(241, 249, 251, .78);
}

/* Give the wide-screen navigation the same soft material language. */
@media (min-width: 801px) {
  .desktop-tabs {
    border-radius: 999px;
    padding: 6px;
    gap: 3px;
    border-color: rgba(218, 247, 249, .26);
    background: linear-gradient(135deg, rgba(241, 250, 253, .18), rgba(106, 169, 181, .10));
    backdrop-filter: blur(28px) saturate(165%);
    -webkit-backdrop-filter: blur(28px) saturate(165%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 18px 45px rgba(0,0,0,.22);
  }
  .desktop-tabs .tab { border-radius: 999px; }
  .desktop-tabs .tab.active {
    color: #ddfff7;
    background: linear-gradient(125deg, rgba(35, 139, 139, .48), rgba(58, 106, 162, .35));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 5px 17px rgba(3,28,40,.24);
  }
  .app-sidebar {
    border-right: 1px solid rgba(214,245,252,.16);
    background: linear-gradient(155deg, rgba(43, 66, 76, .78), rgba(10,16,28,.89) 48%, rgba(15,25,37,.88));
    backdrop-filter: blur(28px) saturate(145%);
    -webkit-backdrop-filter: blur(28px) saturate(145%);
  }
  .sidebar-nav-item.active {
    border-radius: 18px;
    background: rgba(144, 236, 222, .15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  }
}

@media (max-width: 800px) {
  body:not(.hide-bottom-bar):not(.keyboard-open) .mobile-nav.flux-dock {
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 8px !important;
    left: 10px !important;
    right: 10px !important;
    bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important;
    width: min(540px, calc(100% - 20px)) !important;
    max-width: none !important;
    height: 72px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    isolation: isolate;
  }
  .flux-dock .dock-main,
  .flux-dock .dock-profile {
    position: relative;
    overflow: hidden;
    color: var(--dock-ink) !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    background: linear-gradient(150deg, rgba(255,255,255,.9), var(--dock-surface) 40%, rgba(210,229,233,.72)) !important;
    backdrop-filter: blur(26px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(85,128,139,.15), 0 13px 32px rgba(0,12,21,.30) !important;
  }
  .flux-dock .dock-main::before,
  .flux-dock .dock-profile::before {
    content: "";
    position: absolute;
    inset: 1px 10% auto;
    height: 35%;
    border-radius: 100%;
    background: linear-gradient(180deg, rgba(255,255,255,.65), transparent);
    pointer-events: none;
  }
  .flux-dock .dock-main {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
    padding: 5px;
    border-radius: 999px;
  }
  .flux-dock .m-tab {
    min-width: 0;
    height: 60px !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    border-radius: 999px !important;
    color: var(--dock-muted) !important;
    background: transparent !important;
    transform-origin: center bottom;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease, color .22s ease, box-shadow .22s ease !important;
  }
  .flux-dock .m-tab .m-icon-wrap { width: 27px !important; height: 27px !important; }
  .flux-dock .m-tab .nav-svg { width: 24px !important; height: 24px !important; }
  .flux-dock .m-tab .m-lbl { font-size: 10px !important; font-weight: 650 !important; letter-spacing: 0 !important; }
  .flux-dock .m-tab.active {
    color: var(--dock-accent) !important;
    background: linear-gradient(155deg, rgba(90,190,189,.26), rgba(84,142,170,.16)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 3px 12px rgba(30,87,94,.13) !important;
  }
  .flux-dock .m-tab.active .nav-svg { stroke: currentColor !important; filter: none !important; }
  .flux-dock .m-tab.active .m-lbl { color: var(--dock-accent) !important; }
  .flux-dock .m-tab:active { transform: scale(.91) translateY(1px) !important; }
  .flux-dock .m-tab.dock-profile {
    flex: 0 0 72px !important;
    width: 72px;
    height: 72px !important;
    border-radius: 50% !important;
    color: var(--dock-ink) !important;
    background: linear-gradient(150deg, rgba(255,255,255,.9), var(--dock-surface) 40%, rgba(210,229,233,.72)) !important;
  }
  .flux-dock .m-tab.dock-profile.active { background: linear-gradient(155deg, rgba(196,249,239,.95), rgba(147,204,207,.85)) !important; }
  .flux-dock .dock-profile .m-lbl { font-size: 9px !important; }
  body:not(.hide-bottom-bar):not(.keyboard-open) { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
  body.tab-chat-active:not(.hide-bottom-bar):not(.keyboard-open) { padding-bottom: 0 !important; }
  body.tab-chat-active:not(.hide-bottom-bar):not(.keyboard-open) #panel-chat.active {
    height: calc(var(--app-height, 100dvh) - 58px - 92px - env(safe-area-inset-bottom, 0px)) !important;
    max-height: calc(var(--app-height, 100dvh) - 58px - 92px - env(safe-area-inset-bottom, 0px)) !important;
  }
  body.keyboard-open .mobile-nav.flux-dock { transform: translateY(130%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
  body.hide-bottom-bar .mobile-nav.flux-dock { display: none !important; }
}

@media (max-width: 360px) {
  .flux-dock .dock-main { gap: 0; padding: 4px; }
  .flux-dock .m-tab.dock-profile { flex-basis: 64px !important; width: 64px; height: 64px !important; align-self: center; }
  .flux-dock .m-tab .m-lbl { font-size: 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .flux-dock .m-tab { transition: none !important; }
  .flux-dock .m-tab:active { transform: none !important; }
}

@supports not (backdrop-filter: blur(1px)) {
  .flux-dock .dock-main, .flux-dock .dock-profile { background: #edf5f6 !important; }
}