:root {
  --srb-liquid-blur: blur(34px) saturate(205%);
  --srb-liquid-blur-mobile: blur(28px) saturate(190%);
}

[data-theme="light"] {
  --srb-liquid-fill-img: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.55));
  --srb-liquid-bg: rgba(255,255,255,.55);
  --srb-liquid-border-color: rgba(255,255,255,.82);
  --srb-liquid-shadow: 0 4px 12px rgba(0,0,0,.04), 0 24px 48px rgba(0,0,0,.10);
}
[data-theme="dark"] {
  --srb-liquid-fill-img: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --srb-liquid-bg: rgba(22,22,28,.82);
  --srb-liquid-border-color: rgba(255,255,255,.13);
  --srb-liquid-shadow: 0 10px 26px rgba(0,0,0,.32), 0 16px 40px rgba(0,0,0,.18);
}

.navbar {
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.navbar::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: var(--srb-liquid-bg) !important;
  background-image: var(--srb-liquid-fill-img) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.05) !important;
  backdrop-filter: var(--srb-liquid-blur) !important;
  -webkit-backdrop-filter: var(--srb-liquid-blur) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
[data-theme="dark"] .navbar::before {
  box-shadow: 0 10px 26px rgba(0,0,0,.12) !important;
}
.navbar::after { display: none !important; }

#read-progress {
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 2px !important;
  background: transparent !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
#read-progress > div {
  height: 100% !important;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899) !important;
  box-shadow: 0 0 8px rgba(139,92,246,.45) !important;
  transition: width .08s linear !important;
}

html body .modal-box,
html body .user-dropdown,
html body #user-nav-dropdown,
html body .nav-apps-dropdown,
html body #nav-apps-dropdown,
html body .site-theme-dropdown,
html body #site-theme-dropdown,
html body div.site-theme-dropdown,
html body div#site-theme-dropdown,
html body .conv-more-menu,
html body #conv-more-menu,
html body .nav-menu.show {
  background: none !important;
  background-color: var(--srb-liquid-bg) !important;
  background-image: var(--srb-liquid-fill-img) !important;
  border: 1px solid var(--srb-liquid-border-color) !important;
  box-shadow: var(--srb-liquid-shadow) !important;
  backdrop-filter: var(--srb-liquid-blur) !important;
  -webkit-backdrop-filter: var(--srb-liquid-blur) !important;
}

.chat-sidebar {
  background-color: var(--srb-liquid-bg) !important;
  background-image: var(--srb-liquid-fill-img) !important;
  border-right: 1px solid var(--srb-liquid-border-color) !important;
  backdrop-filter: var(--srb-liquid-blur) !important;
  -webkit-backdrop-filter: var(--srb-liquid-blur) !important;
}

.feature-card, .app-card, .doc-card, .continue-item,
.home-product-point, .home-section-point {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .feature-card,
[data-theme="light"] .app-card,
[data-theme="light"] .doc-card,
[data-theme="light"] .continue-item {
  background: rgba(255,255,255,.82) !important;
}
[data-theme="dark"] .feature-card,
[data-theme="dark"] .app-card,
[data-theme="dark"] .doc-card,
[data-theme="dark"] .continue-item {
  background: rgba(20,22,30,.62) !important;
}

@media (max-width: 768px) {
  .navbar::before, .chat-sidebar {
    backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
  }
}

@media (max-width: 768px) {
  
  html body #site-theme-dropdown,
  html body div#site-theme-dropdown {
    position: fixed !important;
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: min(280px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
    backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
  }

  
  html body #nav-apps-dropdown,
  html body div#nav-apps-dropdown {
    position: fixed !important;
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: min(260px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: 0 !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
    backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
  }

  
  html body #user-nav-dropdown {
    position: fixed !important;
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    width: min(280px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
    backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
  }

  
  html body #conv-more-menu {
    width: min(240px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    backdrop-filter: var(--srb-liquid-blur-mobile) !important;
    -webkit-backdrop-filter: var(--srb-liquid-blur-mobile) !important;
  }
}