/**
 * R3 — official F7 Navbar glass skin (R3 chat routes only).
 * Styling only: F7 Router owns .link.back; no custom header owner.
 * Scoped via body.f7-chat-route-active — no JS class required.
 */

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar {
  --f7-navbar-bg-color: transparent;
  --f7-navbar-text-color: rgba(255, 255, 255, 0.93);
  --f7-navbar-link-color: rgba(255, 255, 255, 0.9);
  background: transparent !important;
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar-bg {
  background: var(--f7-glass-bg) !important;
  backdrop-filter: blur(var(--f7-glass-blur)) saturate(var(--f7-glass-saturate));
  -webkit-backdrop-filter: blur(var(--f7-glass-blur)) saturate(var(--f7-glass-saturate));
  border-bottom: var(--f7-glass-border-width) solid var(--f7-glass-border-color);
  box-shadow: var(--f7-glass-shadow-inset-top), var(--f7-glass-shadow-inset-bottom);
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--f7-glass-glare-static);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  mask-image: none;
  -webkit-mask-image: none;
  opacity: 1;
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar-bg::after {
  display: none !important;
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar-inner {
  position: relative;
  z-index: 1;
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar .title {
  color: rgba(255, 255, 255, 0.93);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.2px;
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar .left .link.back {
  color: rgba(255, 255, 255, 0.9);
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar .left .link.back:active {
  opacity: 0.72;
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar .left .link.back .icon-back {
  color: inherit;
}

@media (prefers-reduced-transparency: reduce) {
  body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar-bg {
    background: var(--f7-glass-bg-opaque) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar-bg::before {
    opacity: 0.35;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-page .navbar-bg {
    background: var(--f7-glass-bg-opaque) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

html.ios-translucent-bars
  body.f7-chat-route-active.f7-shell-settled
  #f7-app-root
  .page.chat-page
  .navbar-bg {
  background: var(--f7-glass-bg-opaque) !important;
  backdrop-filter: blur(var(--f7-glass-blur)) saturate(var(--f7-glass-saturate)) !important;
  -webkit-backdrop-filter: blur(var(--f7-glass-blur)) saturate(var(--f7-glass-saturate)) !important;
}

/* DM chat — reference .chat-header glass (doc/design/deepseek_html_20260523_869678.html) */
body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-dm-page .navbar-bg {
  background: var(--f7-chat-navbar-scrim) !important;
  backdrop-filter: blur(var(--f7-chat-navbar-blur));
  -webkit-backdrop-filter: blur(var(--f7-chat-navbar-blur));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-dm-page .navbar-bg::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 40%,
    transparent 100%
  );
}

body.f7-chat-route-active.f7-shell-settled #f7-app-root .page.chat-dm-page .navbar .title {
  font-weight: 500;
  font-size: 14px;
}
