Apply glass scrollbar globally

docs/codex-miaojing/bug-location-guide.md

@@ -30,6 +30,7 @@ Use this guide when the user reports behavior. Start from the symptom row, inspe
 | Policy pages start mid-page after navigation | `src/components/site-policy-page.tsx`, `src/app/about/page.tsx`, `src/app/terms/page.tsx`, `src/app/privacy/page.tsx`, `src/app/help/page.tsx` | Scroll reset behavior and shared policy page wrapper. |
 | Site name/logo/favicon not updating | `src/components/site-config-sync.tsx`, `src/components/site-brand.tsx`, `src/app/api/site-config/route.ts`, `src/lib/local-storage.ts` | `site_config` row, base64 image save, generated `/api/local-storage/*` URL. |
 | Page content leaves large unused horizontal margins, or wide screens look like the UI was simply enlarged | `src/components/app-shell.tsx`, `src/components/navbar.tsx`, `src/components/site-footer.tsx`, page-level wrappers under `src/app/*/page.tsx`, `src/components/site-policy-page.tsx` | The viewport/background can be `w-full`, but product content should keep the original component scale and readable containers such as `max-w-7xl`, `max-w-4xl`, or `max-w-3xl`. Do not fix this by removing all max widths or scaling controls up on wide monitors. |
+| Scrollbars look native or do not match glass UI in dialogs/pages | `src/app/globals.css` | Global `*::-webkit-scrollbar*` and Firefox `scrollbar-color` rules should provide rounded glass scrollbars for both light and dark themes. Avoid adding one-off scrollbar styles to individual components unless there is a real exception. |
 | Disabled canvas/`画布` appears again in public UI | `src/components/navbar.tsx`, `src/app/canvas/page.tsx`, `docs/codex-miaojing/feature-code-index.md` | Navbar should not include `/canvas`, and `/canvas` should continue to call `notFound()` unless the product explicitly re-enables the legacy canvas feature. |
 | Announcement not popping up | `src/components/announcement-popup.tsx`, `src/app/api/announcements/route.ts`, `src/components/app-shell.tsx` | App shell includes popup, active date range, local/session dismissal behavior, GET payload shape. |
 | Announcement admin edit fails | `src/components/admin/announcement-tab.tsx`, `src/app/api/announcements/route.ts` | Admin token, required fields, `starts_at`/`expires_at` compatibility. |

docs/codex-miaojing/feature-code-index.md

@@ -8,11 +8,11 @@ Use this document to jump directly to code before broad searching.
 
 | Feature | Primary Files | Notes |
 | --- | --- | --- |
-| Root layout and providers | `src/app/layout.tsx`, `src/components/app-shell.tsx` | App shell wires navbar, site config sync, visit tracking, theme/account sync, toaster, and full-width page mounting. Keep product content at the original component scale; use centered responsive containers instead of stretching all content to viewport edges. |
+| Root layout and providers | `src/app/layout.tsx`, `src/components/app-shell.tsx`, `src/app/globals.css` | App shell wires navbar, site config sync, visit tracking, theme/account sync, toaster, and full-width page mounting. Keep product content at the original component scale; use centered responsive containers instead of stretching all content to viewport edges. Global scrollbars use a rounded glass style for light/dark themes in `globals.css`. |
 | Home page | `src/app/page.tsx` | Landing/dashboard-like public entry. Check site config dependencies when changing brand text. |
 | Navbar | `src/components/navbar.tsx`, `src/components/site-brand.tsx` | Navigation, brand display, auth-aware links. User-facing nav intentionally excludes the disabled legacy canvas route. |
 | Footer | `src/components/site-footer.tsx` | Uses site config for policy/help/about links and filing text; footer background spans browser width while inner content keeps the original `max-w-7xl` scale. |
-| Announcement popup | `src/components/announcement-popup.tsx`, `src/app/api/announcements/route.ts`, `src/app/globals.css` | Frontend popup behavior plus backend announcement CRUD. Desktop dialog is intentionally wide (`max-w-5xl`) for long Markdown notices; its content uses the scoped `.announcement-scrollbar` glass scrollbar for light/dark themes. |
+| Announcement popup | `src/components/announcement-popup.tsx`, `src/app/api/announcements/route.ts`, `src/app/globals.css` | Frontend popup behavior plus backend announcement CRUD. Desktop dialog is intentionally wide (`max-w-5xl`) for long Markdown notices; scrollbar styling is inherited from the global glass scrollbar rules. |
 | Site config sync | `src/components/site-config-sync.tsx`, `src/lib/site-config.ts`, `src/app/api/site-config/route.ts` | Site name, tab title, logo, favicon, policy Markdown, filing, membership switch. |
 | Visit tracking | `src/components/visit-tracker.tsx`, `src/app/api/site-stats/route.ts` | Public visit counter. |
 

src/app/globals.css

@@ -430,17 +430,17 @@
   color: var(--foreground);
 }
 
-.announcement-scrollbar {
+* {
   scrollbar-width: thin;
   scrollbar-color: rgb(151 114 58 / 0.58) rgb(255 255 255 / 0.22);
-  scrollbar-gutter: stable;
 }
 
-.announcement-scrollbar::-webkit-scrollbar {
+*::-webkit-scrollbar {
   width: 14px;
+  height: 14px;
 }
 
-.announcement-scrollbar::-webkit-scrollbar-track {
+*::-webkit-scrollbar-track {
   border: 1px solid rgb(116 88 43 / 0.16);
   border-radius: 999px;
   background:
@@ -454,8 +454,9 @@
   -webkit-backdrop-filter: blur(14px) saturate(128%);
 }
 
-.announcement-scrollbar::-webkit-scrollbar-thumb {
+*::-webkit-scrollbar-thumb {
   min-height: 48px;
+  min-width: 48px;
   border: 4px solid transparent;
   border-radius: 999px;
   background:
@@ -466,27 +467,27 @@
     0 3px 9px rgb(92 69 32 / 0.18);
 }
 
-.announcement-scrollbar::-webkit-scrollbar-thumb:hover {
+*::-webkit-scrollbar-thumb:hover {
   background:
     linear-gradient(180deg, rgb(191 145 72 / 0.86), rgb(135 101 51 / 0.76))
     padding-box;
 }
 
-.announcement-scrollbar::-webkit-scrollbar-button {
+*::-webkit-scrollbar-button {
   display: none;
   width: 0;
   height: 0;
 }
 
-.announcement-scrollbar::-webkit-scrollbar-corner {
+*::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-.dark .announcement-scrollbar {
+.dark * {
   scrollbar-color: rgb(237 190 104 / 0.58) rgb(255 255 255 / 0.08);
 }
 
-.dark .announcement-scrollbar::-webkit-scrollbar-track {
+.dark *::-webkit-scrollbar-track {
   border-color: rgb(255 255 255 / 0.10);
   background:
     linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.045)),
@@ -497,7 +498,7 @@
     0 8px 22px rgb(0 0 0 / 0.20);
 }
 
-.dark .announcement-scrollbar::-webkit-scrollbar-thumb {
+.dark *::-webkit-scrollbar-thumb {
   background:
     linear-gradient(180deg, rgb(237 190 104 / 0.70), rgb(145 103 46 / 0.68))
     padding-box;
@@ -506,7 +507,7 @@
     0 3px 10px rgb(0 0 0 / 0.30);
 }
 
-.dark .announcement-scrollbar::-webkit-scrollbar-thumb:hover {
+.dark *::-webkit-scrollbar-thumb:hover {
   background:
     linear-gradient(180deg, rgb(250 205 119 / 0.84), rgb(165 118 52 / 0.78))
     padding-box;

src/components/announcement-popup.tsx

@@ -72,7 +72,7 @@ export function AnnouncementPopup() {
             平台公告：{currentAnn.title}
           </DialogDescription>
         </DialogHeader>
-        <div className="announcement-markdown announcement-scrollbar max-h-[60vh] overflow-y-auto py-2 pr-3">
+        <div className="announcement-markdown max-h-[60vh] overflow-y-auto py-2 pr-3">
           <ReactMarkdown remarkPlugins={[remarkGfm]}>
             {currentAnn.content}
           </ReactMarkdown>