/* =========================================================================
   newsomo · bottom navigation · separate overlay layer
   Single source of truth for bnav. Included by all 5 main pages.
   Sprint #404.
   ========================================================================= */

/* Sprint #475 · Editorial unification — solid bottom bar (Apple News style)
   Sprint #476 · transition + hide states для keyboard/scroll
   Sprint #478 · повітряне напівпрозоре скло + vertical-aware accent
     - opacity 0.92 → 0.68 (більше прозорості, видно контент)
     - blur 20 → 28, saturate 180 → 220 (живіше скло)
     - active tab tint через color-mix із --accent (vertical color)
     - subtle inner glow при active state */
#newsomo-bnav {
  position: fixed;
  left: 0;
  right: 0;
  /* 04.08 · ВІДКОЧЕНО. Був підйом меню на кромку клавіатури
     (bottom: var(--nsm-kb)) — і він суперечив Sprint #476, який ХОВАЄ
     таб-бар при фокусі в поле (клас nb-keyboard-hidden). Два взаємно
     виключні наміри: елемент отримував і bottom, і translateY(110%) вниз.
     Намір продукту — ховати. Лишаємо як було. */
  bottom: 0;
  z-index: 9999;
  display: flex;
  gap: 3px;
  /* Liquid glass — fallback на paper, з accent якщо є variable */
  background: rgba(251, 250, 247, 0.68);
  backdrop-filter: blur(28px) saturate(220%);
  -webkit-backdrop-filter: blur(28px) saturate(220%);
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 0;
  padding: 4px 8px calc(env(safe-area-inset-bottom, 0px) + 4px);


  /* Sprint #476 · плавно ховаємо при scroll-down + keyboard open */
  transform: translateY(0);
  transition: transform .24s cubic-bezier(.32,.72,.34,1), background .24s ease;
  will-change: transform;

  /* Edge lighting · iOS 26 detail — тонкий highlight по верхньому краю */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);

  /* Не успадковує жодних стилів від сторінки */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
  color: #8A8780;
  line-height: 1;
  pointer-events: auto;
}

/* Fallback для браузерів без backdrop-filter (Capacitor WebView старіших iOS) */
@supports not (backdrop-filter: blur(1px)) {
  #newsomo-bnav { background: rgba(251, 250, 247, 0.96); }
}

/* Sprint #476 · приховання — slides down off-screen.
   Обидва стани (keyboard + scroll) використовують ту саму трансформацію. */
#newsomo-bnav.nb-keyboard-hidden,
#newsomo-bnav.nb-scroll-hidden {
  transform: translateY(110%);
  pointer-events: none;
}

/* Sprint · повне приховання меню на full-chat екранах (асистент), щоб не перекривати композер */
#newsomo-bnav.nb-force-hidden {
  transform: translateY(110%);
  pointer-events: none;
}

/* Reduce-motion accessibility — миттєвий toggle без animation */
@media (prefers-reduced-motion: reduce) {
  #newsomo-bnav { transition: none; }
}

#newsomo-bnav .nb-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  color: #8A8780;
  cursor: pointer;
  text-decoration: none;
  padding: 10px 2px;
  border-radius: 16px;
  transition: background 0.16s, color 0.16s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#newsomo-bnav .nb-tab svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#newsomo-bnav .nb-tab span {
  font: 600 10px/1 inherit;
}

/* Sprint #478 · vertical-aware accent через --accent (set by body.theme-X)
   Fallback на teal якщо theme-X не set (старі pages без tokens.css) */
#newsomo-bnav .nb-tab.is-active {
  color: var(--accent, #0A8D9C);
  background: color-mix(in srgb, var(--accent, #0A8D9C) 12%, transparent);
  /* Tiny inner glow для active item — як iOS 26 chip */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent, #0A8D9C) 16%, transparent);
}

#newsomo-bnav .nb-tab:active {
  background: color-mix(in srgb, var(--accent, #0A8D9C) 20%, transparent);
}

/* Fallback для браузерів без color-mix (Safari < 16.4) */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  #newsomo-bnav .nb-tab.is-active {
    color: var(--accent, #0A8D9C);
    background: rgba(10, 141, 156, 0.12);
  }
  #newsomo-bnav .nb-tab:active {
    background: rgba(10, 141, 156, 0.18);
  }
}

/* Hide bnav on specific pages (set body data-no-bnav="1") */
body[data-no-bnav="1"] #newsomo-bnav {
  display: none;
}

/* Reserved space at bottom of all pages so content doesn't hide under bnav */
body[data-bnav="1"] {
  padding-bottom: 0; /* bnav is absolute layer, no impact on body */
}

/* =========================================================================
   Sprint #407 · Skeleton screens (shimmer) для loading states
   Утиліти-класи. Сторінки можуть додати .nb-skel у будь-який div щоб
   показати animated placeholder поки контент вантажиться.
   ========================================================================= */
.nb-skel {
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.10) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: nb-shimmer 1.4s infinite linear;
  border-radius: 12px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.nb-skel-line {
  height: 12px;
  margin: 6px 0;
  border-radius: 6px;
}
.nb-skel-line.short { width: 40%; }
.nb-skel-line.med   { width: 70%; }
.nb-skel-line.long  { width: 92%; }
.nb-skel-circle {
  width: 48px; height: 48px;
  border-radius: 999px;
}
.nb-skel-card {
  height: 80px;
  margin-bottom: 10px;
  border-radius: 16px;
}
@keyframes nb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-skel { animation: none; opacity: 0.6; }
}

@media (prefers-color-scheme: dark) {
  .nb-skel {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
  }
}

/* Sprint #405 · View Transitions API · плавний cross-fade між сторінками
   Bnav залишається на місці (root-view-transition: contain) щоб не блимав */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  ::view-transition-old(root) {
    animation-name: nb-fade-out;
  }
  ::view-transition-new(root) {
    animation-name: nb-fade-in;
  }
  @keyframes nb-fade-out {
    to { opacity: 0; transform: translateY(-4px); }
  }
  @keyframes nb-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}