/**
 * R2 — shared liquid-glass design tokens (bottom tabbar + future F7 Navbar).
 * Visual reference: doc/design/deepseek_html_20260523_869678.html (CSS ideas only).
 */

:root {
  --f7-glass-bg: rgba(10, 10, 14, 0.72);
  --f7-glass-bg-opaque: rgba(12, 12, 18, 0.88);
  --f7-glass-blur: 64px;
  --f7-glass-saturate: 200%;
  --f7-glass-border-color: rgba(255, 255, 255, 0.1);
  --f7-glass-border-width: 1px;
  --f7-glass-radius-bubble: 20px;
  --f7-glass-shadow-outer: 0 8px 32px rgba(0, 0, 0, 0.55);
  --f7-glass-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --f7-glass-shadow-inset-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  --f7-glass-glare-static: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.14) 0px,
      rgba(255, 255, 255, 0.03) 5px,
      transparent 16px
    ),
    linear-gradient(
      128deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.02) 38%,
      transparent 62%
    );
  --f7-glass-glare-active: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.06) 38%,
    transparent 62%
  );
  --f7-glass-label-idle: rgba(255, 255, 255, 0.38);
  --f7-glass-icon-idle: rgba(255, 255, 255, 0.42);
  --f7-glass-accent: #ff6a00;
  --f7-glass-accent-soft: rgba(255, 106, 0, 0.65);
  /* F7 glass tabbar — compact tokens (not legacy --nav-* from MAIN_MENU) */
  --f7-glass-tabbar-h: 60px;
  --f7-glass-tab-icon: 26px;
  --f7-glass-tab-label: 10px;
  --f7-glass-tab-gap: 3px;
  --f7-glass-tab-dot: 4px;
  --f7-glass-radius-pill: 26px;
  --f7-glass-tabbar-margin-x: 16px;
  --f7-glass-tabbar-float-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
  --f7-glass-tabbar-total-offset: calc(
    var(--f7-glass-tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px
  );
  --f7-glass-navbar-h: 44px;
  --f7-glass-navbar-margin-x: 12px;
  --f7-safe-top: env(safe-area-inset-top, 0px);
  --f7-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* CHAT-ROUTE-Q2A2/Q2D — route tokens; visual owner is Q2B canvas (host atmosphere uses these) */
  --f7-chat-route-surface-base: #0a0a0e;
  --f7-chat-route-surface-strong: #0c0c12;
  --f7-chat-route-surface-atmosphere:
    radial-gradient(ellipse 85% 55% at 20% 10%, rgba(255, 100, 0, 0.14), transparent 65%),
    radial-gradient(ellipse 60% 50% at 80% 90%, rgba(255, 40, 0, 0.06), transparent 55%),
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(80, 200, 120, 0.05), transparent 60%);
  --f7-chat-route-surface-fallback: #0a0a0e;
  /* legacy aliases — composer scrim, awaiting overlay references */
  --f7-chat-route-scrim: var(--f7-chat-route-surface-base);
  --f7-chat-dm-scrim: var(--f7-chat-route-surface-base);
  --f7-chat-bubble-py: 8px;
  --f7-chat-bubble-px: 12px;
  --f7-chat-bubble-font-size: 14px;
  --f7-chat-bubble-line-height: 1.25;
  --f7-chat-bubble-time-size: 10px;
  --f7-chat-bubble-max-width: 75%;
  --f7-chat-bubble-gap: 9px;
  --f7-chat-bubble-radius: 16px;
  --f7-chat-bubble-tail-radius: 4px;
  --f7-chat-bubble-blur: 10px;
  --f7-chat-bubble-fill-received: rgba(255, 255, 255, 0.03);
  --f7-chat-bubble-fill-sent: rgba(255, 255, 255, 0.05);
  --f7-chat-composer-scrim: rgba(0, 0, 0, 0.5);
  --f7-chat-composer-blur: 20px;
  --f7-chat-input-fill: rgba(255, 255, 255, 0.04);
  --f7-chat-input-blur: 10px;
  --f7-chat-navbar-scrim: rgba(0, 0, 0, 0.5);
  --f7-chat-navbar-blur: 20px;
}

/* Reusable glass plate — official F7 chrome skins only (not nav owners). */
.f7-glass-surface {
  position: relative;
  background: var(--f7-glass-bg);
  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: 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),
    var(--f7-glass-shadow-outer);
  isolation: isolate;
  overflow: hidden;
}

.f7-glass-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: var(--f7-glass-glare-static);
}

.f7-glass-surface > * {
  position: relative;
  z-index: 1;
}

/* Gradient border ring (reference: mask-composite technique, CSS-only). */
.f7-glass-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.12) 42%,
    rgba(255, 255, 255, 0.08) 58%,
    rgba(255, 255, 255, 0.28) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --f7-glass-bg: var(--f7-glass-bg-opaque);
    --f7-glass-blur: 0px;
    --f7-glass-saturate: 100%;
  }
  .f7-glass-surface::before,
  .f7-glass-surface::after {
    opacity: 0.35;
  }
}

@supports not (backdrop-filter: blur(1px)) {
  .f7-glass-surface {
    background: var(--f7-glass-bg-opaque);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

html.ios-translucent-bars .f7-glass-surface,
html.ios-translucent-bars .f7-glass-tabbar {
  background: var(--f7-glass-bg-opaque) !important;
}