/* ==========================================================================
   Variant B: Liquid glass chrome (header + bottom dock)
   Variant E: Active tab = colored 3D tile
   ========================================================================== */

/* —— HEADER: liquid glass —— */
.navbar {
  --nav-glass-a: rgba(255, 255, 255, 0.55) !important;
  --nav-glass-b: rgba(237, 228, 255, 0.42) !important;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.62) 0%,
      rgba(237, 228, 255, 0.38) 48%,
      rgba(255, 255, 255, 0.28) 100%
    ) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: 28px !important;
  box-shadow:
    inset 0 1.5px 1px rgba(255, 255, 255, 0.75),
    inset 0 -8px 20px rgba(139, 124, 246, 0.1),
    0 0 0 1px rgba(167, 139, 250, 0.22),
    0 12px 32px rgba(45, 38, 64, 0.14),
    0 0 24px rgba(167, 139, 250, 0.12) !important;
  backdrop-filter: blur(22px) saturate(1.55) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.55) !important;
  overflow: hidden;
}

.nav-glass-facet,
.nav-glass-sheen {
  opacity: 0.9 !important;
  display: block !important;
}

[data-theme="dark"] .navbar,
[data-theme="dark-neon"] .navbar,
[data-theme="soft-neon-night"] .navbar,
[data-theme="deep-purple-clay"] .navbar {
  background:
    linear-gradient(
      145deg,
      rgba(90, 78, 140, 0.45) 0%,
      rgba(42, 35, 72, 0.55) 50%,
      rgba(30, 24, 55, 0.5) 100%
    ) !important;
  border-color: rgba(196, 181, 253, 0.28) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -8px 18px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(167, 139, 250, 0.2),
    0 14px 36px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(139, 124, 246, 0.12) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
}

/* —— BOTTOM DOCK: liquid glass clouds —— */
@media (max-width: 768px) {
  .mobile-nav-cloud {
    background:
      linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.58) 0%,
        rgba(237, 228, 255, 0.4) 42%,
        rgba(255, 255, 255, 0.3) 100%
      ) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow:
      inset 0 1.5px 2px rgba(255, 255, 255, 0.8),
      inset 0 -8px 18px rgba(139, 124, 246, 0.12),
      0 0 0 1px rgba(167, 139, 250, 0.18),
      0 12px 28px rgba(45, 38, 64, 0.16),
      0 0 20px rgba(167, 139, 250, 0.1) !important;
    backdrop-filter: blur(22px) saturate(1.55) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.55) !important;
    overflow: hidden;
  }

  .mobile-nav-cloud::before,
  .mobile-nav-cloud::after {
    opacity: 0.95 !important;
    display: block !important;
  }

  [data-theme="dark"] .mobile-nav-cloud,
  [data-theme="dark-neon"] .mobile-nav-cloud,
  [data-theme="soft-neon-night"] .mobile-nav-cloud,
  [data-theme="deep-purple-clay"] .mobile-nav-cloud {
    background:
      linear-gradient(
        165deg,
        rgba(90, 78, 140, 0.5) 0%,
        rgba(42, 35, 72, 0.58) 50%,
        rgba(30, 24, 55, 0.52) 100%
      ) !important;
    border-color: rgba(196, 181, 253, 0.28) !important;
    box-shadow:
      inset 0 1px 1px rgba(255, 255, 255, 0.12),
      inset 0 -8px 16px rgba(0, 0, 0, 0.28),
      0 0 0 1px rgba(167, 139, 250, 0.18),
      0 14px 32px rgba(0, 0, 0, 0.42),
      0 0 22px rgba(139, 124, 246, 0.1) !important;
    backdrop-filter: blur(24px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  }

  /* Default tab: quiet on glass */
  .mobile-nav-item {
    position: relative;
    z-index: 1;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    transition:
      background 0.18s ease,
      box-shadow 0.18s ease,
      transform 0.15s ease,
      color 0.15s ease,
      border-color 0.15s ease !important;
  }

  .mobile-nav-item span {
    color: inherit !important;
    font-weight: 700;
  }

  .mobile-nav-3d {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  /* —— E: Active tab = colored 3D tile —— */
  .mobile-nav-item.active {
    color: #3b2f5c !important;
    transform: translateY(-2px);
    border: 1.5px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.75) inset,
      0 5px 0 rgba(0, 0, 0, 0.08),
      0 10px 18px rgba(45, 38, 64, 0.14) !important;
  }

  /* Chat → lilac */
  .mobile-nav-item.active[data-tab="chat"] {
    background: linear-gradient(165deg, #efe8ff 0%, #e0d4ff 100%) !important;
    color: #5b21b6 !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 5px 0 rgba(139, 124, 246, 0.35),
      0 12px 20px rgba(139, 124, 246, 0.28) !important;
  }

  /* Ребёнок → peach */
  .mobile-nav-item.active[data-tab="passport"] {
    background: linear-gradient(165deg, #ffe9df 0%, #ffd8c8 100%) !important;
    color: #9a3412 !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.8) inset,
      0 5px 0 rgba(251, 146, 60, 0.35),
      0 12px 20px rgba(251, 146, 60, 0.22) !important;
  }

  /* Знания → butter */
  .mobile-nav-item.active[data-tab="knowledge"] {
    background: linear-gradient(165deg, #fff6d9 0%, #ffe9a8 100%) !important;
    color: #854d0e !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.85) inset,
      0 5px 0 rgba(234, 179, 8, 0.35),
      0 12px 20px rgba(234, 179, 8, 0.2) !important;
  }

  /* Пульс → sky */
  .mobile-nav-item.active[data-tab="analytics"] {
    background: linear-gradient(165deg, #e5f4ff 0%, #cfe9ff 100%) !important;
    color: #0c4a6e !important;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.85) inset,
      0 5px 0 rgba(56, 189, 248, 0.35),
      0 12px 20px rgba(56, 189, 248, 0.22) !important;
  }

  .mobile-nav-item.active .mobile-nav-3d {
    transform: translateY(-1px) scale(1.08);
    box-shadow: 0 4px 10px rgba(45, 38, 64, 0.16);
  }

  /* Night: keep pastel tiles bright so they pop on dark glass */
  [data-theme="dark"] .mobile-nav-item.active,
  [data-theme="dark-neon"] .mobile-nav-item.active,
  [data-theme="soft-neon-night"] .mobile-nav-item.active,
  [data-theme="deep-purple-clay"] .mobile-nav-item.active {
    /* pastel fills stay light for contrast on dark glass dock */
  }

  [data-theme="dark"] .mobile-nav-item:not(.active),
  [data-theme="dark-neon"] .mobile-nav-item:not(.active),
  [data-theme="soft-neon-night"] .mobile-nav-item:not(.active),
  [data-theme="deep-purple-clay"] .mobile-nav-item:not(.active) {
    color: rgba(240, 234, 251, 0.72) !important;
  }
}

/* Desktop nav buttons — same color language when active */
.nav-btn.active {
  border-radius: 999px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  transform: translateY(-1px);
}

.nav-btn.active[onclick*="'chat'"],
.nav-links .nav-btn.active:nth-child(1) {
  background: linear-gradient(165deg, #efe8ff 0%, #e0d4ff 100%) !important;
  color: #5b21b6 !important;
  box-shadow: 0 4px 0 rgba(139, 124, 246, 0.3), 0 8px 16px rgba(139, 124, 246, 0.2) !important;
}

.nav-btn.active[onclick*="'passport'"],
.nav-links .nav-btn.active:nth-child(2) {
  background: linear-gradient(165deg, #ffe9df 0%, #ffd8c8 100%) !important;
  color: #9a3412 !important;
  box-shadow: 0 4px 0 rgba(251, 146, 60, 0.3), 0 8px 16px rgba(251, 146, 60, 0.18) !important;
}

.nav-btn.active[onclick*="'knowledge'"],
.nav-links .nav-btn.active:nth-child(3) {
  background: linear-gradient(165deg, #fff6d9 0%, #ffe9a8 100%) !important;
  color: #854d0e !important;
  box-shadow: 0 4px 0 rgba(234, 179, 8, 0.3), 0 8px 16px rgba(234, 179, 8, 0.16) !important;
}

.nav-btn.active[onclick*="'analytics'"],
.nav-links .nav-btn.active:nth-child(4) {
  background: linear-gradient(165deg, #e5f4ff 0%, #cfe9ff 100%) !important;
  color: #0c4a6e !important;
  box-shadow: 0 4px 0 rgba(56, 189, 248, 0.3), 0 8px 16px rgba(56, 189, 248, 0.18) !important;
}

.nav-btn.active .nav-svg {
  stroke: currentColor !important;
}

/* Header profile pill on glass */
.header-profile-btn {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(237, 228, 255, 0.35)) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.55),
    0 6px 16px rgba(139, 124, 246, 0.18) !important;
}

[data-theme="dark"] .header-profile-btn,
[data-theme="dark-neon"] .header-profile-btn,
[data-theme="soft-neon-night"] .header-profile-btn,
[data-theme="deep-purple-clay"] .header-profile-btn {
  background:
    linear-gradient(160deg, rgba(90, 78, 140, 0.5), rgba(42, 35, 72, 0.55)) !important;
  border-color: rgba(196, 181, 253, 0.3) !important;
  color: var(--accent-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
  .nav-glass-sheen,
  .mobile-nav-cloud::after {
    animation: none !important;
  }
}

/* === L2 liquid glass polish === */
.navbar {
  position: relative;
  border-color: transparent !important;
  box-shadow: 
    inset 0 1.5px 1px rgba(255, 255, 255, 0.8),
    inset 0 -8px 20px rgba(139, 124, 246, 0.1),
    0 12px 32px rgba(45, 38, 64, 0.14),
    0 0 28px rgba(167, 139, 250, 0.14) !important;
}
.navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(167,139,250,0.75) 28%, rgba(56,189,248,0.55) 52%, rgba(244,114,182,0.45) 78%, rgba(255,255,255,0.7) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
  opacity: 0.9;
}
[data-theme="dark"] .navbar::after,
[data-theme="dark-neon"] .navbar::after,
[data-theme="soft-neon-night"] .navbar::after,
[data-theme="deep-purple-clay"] .navbar::after {
  background: linear-gradient(135deg, rgba(196,181,253,0.7) 0%, rgba(56,189,248,0.45) 40%, rgba(244,114,182,0.4) 70%, rgba(255,255,255,0.25) 100%);
}
@media (max-width: 768px) {
  .mobile-nav-cloud {
    border-color: transparent !important;
    box-shadow:
      inset 0 1.5px 2px rgba(255,255,255,0.85),
      inset 0 -8px 18px rgba(139,124,246,0.12),
      0 0 0 1.5px rgba(200,180,255,0.35),
      0 0 0 2.5px rgba(56,189,248,0.12),
      0 12px 28px rgba(45,38,64,0.16),
      0 0 22px rgba(167,139,250,0.14) !important;
  }
  [data-theme="dark"] .mobile-nav-cloud,
  [data-theme="dark-neon"] .mobile-nav-cloud,
  [data-theme="soft-neon-night"] .mobile-nav-cloud,
  [data-theme="deep-purple-clay"] .mobile-nav-cloud {
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.12),
      inset 0 -8px 16px rgba(0,0,0,0.28),
      0 0 0 1.5px rgba(196,181,253,0.35),
      0 0 0 2.5px rgba(56,189,248,0.12),
      0 14px 32px rgba(0,0,0,0.42),
      0 0 24px rgba(139,124,246,0.12) !important;
  }
}
.chat-input {
  background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.45) 100%) !important;
  border: 1.5px solid transparent !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.85),
    0 0 0 1.5px rgba(200,180,255,0.4),
    0 0 0 2.5px rgba(56,189,248,0.1),
    0 10px 24px rgba(45,38,64,0.1) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
}
.chat-input-area:focus-within .chat-input {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.9),
    0 0 0 1.5px rgba(139,124,246,0.55),
    0 0 0 4px rgba(139,124,246,0.14),
    0 12px 28px rgba(139,124,246,0.16) !important;
}
[data-theme="dark"] .chat-input,
[data-theme="dark-neon"] .chat-input,
[data-theme="soft-neon-night"] .chat-input,
[data-theme="deep-purple-clay"] .chat-input {
  background: linear-gradient(180deg, rgba(90,78,140,0.45) 0%, rgba(42,35,72,0.55) 100%) !important;
  color: var(--text-main) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.1),
    0 0 0 1.5px rgba(196,181,253,0.35),
    0 0 0 2.5px rgba(56,189,248,0.1),
    0 12px 28px rgba(0,0,0,0.3) !important;
}
.mobile-sos-circle-btn {
  box-shadow: 
    inset 0 1px 2px rgba(255,255,255,0.45),
    inset 0 -8px 14px rgba(80,10,10,0.35),
    0 0 0 3px rgba(255,255,255,0.35),
    0 0 0 5px rgba(167,139,250,0.25),
    0 0 0 6px rgba(56,189,248,0.12),
    0 10px 28px var(--sos-glow) !important;
}
.sos-header-btn {
  box-shadow: 
    inset 0 1px 2px rgba(255,255,255,0.4),
    inset 0 -8px 14px rgba(80,10,10,0.35),
    0 0 0 2px rgba(255,255,255,0.4),
    0 0 0 4px rgba(167,139,250,0.28),
    0 8px 22px var(--sos-glow) !important;
}
.mobile-sos-circle-btn.holding, .sos-header-btn.holding {
  box-shadow: 
    inset 0 1px 2px rgba(255,255,255,0.5),
    0 0 0 3px rgba(255,255,255,0.45),
    0 0 0 6px rgba(220,38,38,0.25),
    0 0 0 8px rgba(167,139,250,0.2),
    0 0 32px var(--sos-glow) !important;
}
@media (prefers-reduced-transparency: reduce) {
  .navbar, .mobile-nav-cloud, .chat-input, .header-profile-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .navbar { background: var(--surface-nav, #fff) !important; }
  [data-theme="dark"] .navbar, [data-theme="dark-neon"] .navbar,
[data-theme="soft-neon-night"] .navbar, [data-theme="deep-purple-clay"] .navbar {
    background: var(--surface-nav, #2f2750) !important;
  }
  .mobile-nav-cloud { background: var(--surface-nav, #fff) !important; }
  [data-theme="dark"] .mobile-nav-cloud, [data-theme="dark-neon"] .mobile-nav-cloud,
  [data-theme="soft-neon-night"] .mobile-nav-cloud, [data-theme="deep-purple-clay"] .mobile-nav-cloud {
    background: var(--surface-nav, #2f2750) !important;
  }
  .chat-input { background: var(--surface-card, #fff) !important; }
  [data-theme="dark"] .chat-input, [data-theme="dark-neon"] .chat-input,
  [data-theme="soft-neon-night"] .chat-input, [data-theme="deep-purple-clay"] .chat-input {
    background: var(--surface-card, #342c58) !important;
  }
  .navbar::after { opacity: 0.45; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar { background: rgba(255,255,255,0.92) !important; }
  [data-theme="dark"] .navbar, [data-theme="dark-neon"] .navbar,
  [data-theme="soft-neon-night"] .navbar, [data-theme="deep-purple-clay"] .navbar {
    background: rgba(47,39,80,0.94) !important;
  }
  .mobile-nav-cloud { background: rgba(255,255,255,0.92) !important; }
  [data-theme="dark"] .mobile-nav-cloud, [data-theme="dark-neon"] .mobile-nav-cloud,
  [data-theme="soft-neon-night"] .mobile-nav-cloud, [data-theme="deep-purple-clay"] .mobile-nav-cloud {
    background: rgba(47,39,80,0.94) !important;
  }
  .chat-input { background: #fff !important; }
}