/* ===================================================================
   AiTenderChat — Bottom Navigation v2 (Glass + center FAB)
   =================================================================== */

/* Hide on desktop ≥ 769 */
@media (min-width: 769px) {
  .at-bn, .at-bn-wrap { display: none !important; }
}

/* Wrapper occupies space at the bottom of viewport */
.at-bn-wrap {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  pointer-events: none; /* let only inner items receive */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.at-bn {
  position: relative;
  pointer-events: auto;
  margin: 0 8px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)) 6px;
  border-radius: var(--at-r-xl);
  background: var(--at-glass-bg);
  backdrop-filter: var(--at-glass-blur);
  -webkit-backdrop-filter: var(--at-glass-blur);
  border: 1px solid var(--at-glass-border);
  box-shadow: var(--at-shadow-lg);
  display: grid;
  grid-template-columns: 1fr 1fr 84px 1fr 1fr;
  align-items: end;
  min-height: var(--at-bn-height);
  margin-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
}

@supports not (backdrop-filter: blur(20px)) {
  .at-bn { background: var(--at-glass-strong); }
}

/* tiny screens 320 */
@media (max-width: 360px) {
  .at-bn { grid-template-columns: 1fr 1fr 72px 1fr 1fr; padding-left: 2px; padding-right: 2px; }
}

/* regular nav items */
.at-bn-item {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--at-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px;
  min-height: 48px;
  cursor: pointer;
  position: relative;
  transition: color var(--at-dur-fast) var(--at-ease-out), transform var(--at-dur-fast) var(--at-ease-out);
  font-family: inherit;
}
.at-bn-item svg { width: 24px; height: 24px; stroke-width: 1.8; transition: transform var(--at-dur-fast) var(--at-ease-out); }
.at-bn-item span {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.at-bn-item:active { transform: scale(.92); }
.at-bn-item.active {
  color: var(--at-primary);
}
.at-bn-item.active svg { transform: translateY(-1px); }

/* Active state — subtle pill behind icon */
.at-bn-item.active::before {
  content: '';
  position: absolute;
  top: 4px;
  width: 38px;
  height: 28px;
  border-radius: 14px;
  background: var(--at-grad-soft);
  z-index: -1;
  animation: at-bn-pill-in 280ms var(--at-ease-spring);
}
@keyframes at-bn-pill-in {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Badge */
.at-bn-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 22px);
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--at-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--at-glass-bg);
}

/* === CENTRAL FAB === */
.at-bn-fab-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  position: relative;
}
.at-bn-fab {
  position: absolute;
  bottom: calc(50% - var(--at-bn-fab-size) / 2 + var(--at-bn-fab-lift));
  left: 50%;
  transform: translateX(-50%);
  width: var(--at-bn-fab-size);
  height: var(--at-bn-fab-size);
  border-radius: 50%;
  background: var(--at-grad);
  color: #fff;
  border: none;
  box-shadow: var(--at-shadow-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--at-dur) var(--at-ease-spring), box-shadow var(--at-dur) var(--at-ease-out), filter 120ms var(--at-ease-out);
  font-family: inherit;
}
.at-bn-fab::before {
  /* outer halo ring */
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: var(--at-grad);
  filter: blur(16px);
  opacity: .35;
  z-index: -1;
  transition: opacity var(--at-dur) var(--at-ease-out);
}
.at-bn-fab svg { width: 28px; height: 28px; }
.at-bn-fab-label {
  position: absolute;
  bottom: -16px;
  font-size: 10px;
  color: var(--at-text-muted);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.at-bn-fab:hover { filter: brightness(1.05); }
.at-bn-fab:active { transform: translateX(-50%) scale(.94); }
.at-bn-fab.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  opacity: 0;
  animation: at-fab-pulse 1.8s var(--at-ease-out) infinite;
}
@keyframes at-fab-pulse {
  0% { transform: scale(1); opacity: .35; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Hide bottom-nav on login/public, mp-overlay open, in chat-room view */
body:has(.login-screen) .at-bn-wrap,
body:has(.public-invite) .at-bn-wrap,
body:has(.mp-overlay.open) .at-bn-wrap,
body.at-bn-hide .at-bn-wrap { display: none !important; }

/* Reserve bottom padding so content doesn't hide under nav */
@media (max-width: 768px) {
  body.at-bn-active main,
  body.at-bn-active .chat-list,
  body.at-bn-active .cabinet-content,
  body.at-bn-active .cabinet-main {
    padding-bottom: calc(var(--at-bn-height) + env(safe-area-inset-bottom, 0px) + 18px) !important;
  }
}

/* Hide legacy bottom nav (.tg-bottom-nav) and FAB (#mp-launch) so they don't double-up */
.tg-bottom-nav { display: none !important; }
#mp-launch { display: none !important; }

/* duotone enhancements (приоритет над компонентным CSS) */
.at-bn-item svg [fill-opacity] { fill-opacity: 0.18 !important; }
.at-bn-item.active { color: var(--primary, #6366f1) !important; }
.at-bn-item.active svg [fill-opacity] { fill-opacity: 0.32 !important; }
.at-bn-item.active svg path,
.at-bn-item.active svg circle,
.at-bn-item.active svg rect { stroke: var(--primary, #6366f1); }
.at-bn-fab svg [fill-opacity] { fill-opacity: 0 !important; }
.at-bn-fab svg path,
.at-bn-fab svg circle,
.at-bn-fab svg rect { stroke: #fff !important; }
.at-bn-fab svg { width: 30px; height: 30px; }
[data-theme="dark"] .at-bn-item svg [fill-opacity] { fill-opacity: 0.22 !important; }
[data-theme="dark"] .at-bn-item.active svg [fill-opacity] { fill-opacity: 0.4 !important; }