fix(splash): hide experimental splash components

chore(icons): 使用生产环境的图标
2026-07-21 16:16:41 +08:00 · 2026-07-21 16:16:41 +08:00
86 changed files with 382 additions and 1495 deletions
@@ -224,7 +224,7 @@ payChannel = ezpay
 subscriptionType = vip | topup | tip
 giftCategory（仅 Tip，可空）
 giftPlanId（仅 Tip，可空）
-returnTo = chat | private-room | profile（可选）
+returnTo = chat | private-room | sidebar（可选）
 characterSlug（可选）
 createdAt
 ```
@@ -208,19 +208,13 @@ Paywall 导航发起后立即消费当前请求，避免 React 重渲染重复

 任一条件不满足时，页面通过 replace 删除 `album` 和 `image`，并保留其他查询参数。

-页面内点击九宫格缩略图时，Gallery 从该图片的后端数组原始索引打开。关闭操作优先使用浏览器 back；直接刷新或外部分享 Gallery URL 时，关闭操作使用 replace 返回当前角色 Private Room。
-
-Gallery 只浏览 `locked=false` 且 URL 非空的图片，但 URL 中的 `image` 仍使用原始数组索引。横向拖动时图片跟随指针，达到视口宽度 18%（最低 56px），或达到 0.45px/ms 且至少移动 24px 时切换；首尾越界拖动使用 0.28 阻尼且不循环。松手后使用 240ms 横向吸附动画，键盘方向键和左右按钮复用相同切换逻辑。Escape 关闭；`prefers-reduced-motion` 下取消吸附过渡。
+页面内点击打开 Gallery 时，关闭操作优先使用浏览器 back；直接刷新或外部分享 Gallery URL 时，关闭操作使用 replace 返回当前角色 Private Room。键盘 Escape 关闭，左右方向键和横向滑动切换图片。

 ## 7. UI 与数据边界

 - React key 使用稳定 `albumId`；
 - 卡片图片数量优先使用 `imageCount`，为 0 时回退到 `images.length`；
- 锁定相册继续只显示模糊封面和解锁入口；
- 解锁相册过滤锁定或空 URL 图片，并保留剩余图片的原始数组索引；
- 1 张图片显示 4:5 大图，2/4 张使用两列，其余使用三列正方形九宫格；
- 超过 9 张时卡片显示前九张，末格显示 `+N`，Gallery 仍可浏览全部有效图片；
- Gallery 只挂载当前图片和相邻图片，避免多图相册同时解码全部原图；
+- Gallery 只渲染当前索引存在 URL 的图片；
 - `creditBalance` 是当前列表/解锁响应快照，不替代 User Store 权益；
 - Private Room 不使用 Chat 的 `conversationKey`、消息缓存或媒体缓存；
 - Private Room 不持有 Payment Actor，Top-up 通过路由级导航进入独立 Payment Provider。
@@ -89,7 +89,4 @@ https://<APP_HOST>/external-entry?target=private-room&character=nayeli

 `psid` 可以与任意 `target` 或聊天促销参数组合使用。参数值需要进行 URL 编码，不要在入口中传递登录 Token、Page Access Token 或 App Secret。

-完整可点击示例：
-
- [本地调试链接清单](./debug-links.md)
- [测试环境和正式环境链接清单](./links.md)
+测试环境和正式环境的完整可点击示例见 [外部入口链接清单](./links.md)。
@@ -1,47 +0,0 @@
-# 外部入口本地调试链接清单
-
-[返回外部入口接入说明](./README.md)
-
-启动本地应用后，可以直接点击以下链接进行调试。根网址为 `http://localhost:3000`，PSID 示例统一使用 `27511427698460020`。
-
-## 默认入口
-
-| 入口 | 链接 |
-| --- | --- |
-| 默认入口（Elio 聊天） | [打开默认入口](http://localhost:3000/external-entry) |
-| 普通聊天 | [打开普通聊天](http://localhost:3000/external-entry?target=chat) |
-| 携带 PSID 的聊天 | [打开 PSID 聊天示例](http://localhost:3000/external-entry?target=chat&psid=27511427698460020) |
-
-## 角色聊天
-
-| 角色 | 链接 |
-| --- | --- |
-| Elio | [打开 Elio 聊天](http://localhost:3000/external-entry?target=chat&character=elio) |
-| Maya | [打开 Maya 聊天](http://localhost:3000/external-entry?target=chat&character=maya) |
-| Nayeli | [打开 Nayeli 聊天](http://localhost:3000/external-entry?target=chat&character=nayeli) |
-
-## 聊天促销
-
-| 促销类型 | 链接 |
-| --- | --- |
-| 语音促销 | [打开语音促销](http://localhost:3000/external-entry?target=chat&mode=promotion&promotion_type=voice) |
-| 图片促销 | [打开图片促销](http://localhost:3000/external-entry?target=chat&mode=promotion&promotion_type=image) |
-| 私密文本促销 | [打开私密文本促销](http://localhost:3000/external-entry?target=chat&mode=promotion&promotion_type=private) |
-
-## 咖啡打赏
-
-| 角色 | 链接 |
-| --- | --- |
-| Elio | [打开 Elio 咖啡打赏](http://localhost:3000/external-entry?target=tip&character=elio) |
-| Maya | [打开 Maya 咖啡打赏](http://localhost:3000/external-entry?target=tip&character=maya) |
-| Nayeli | [打开 Nayeli 咖啡打赏](http://localhost:3000/external-entry?target=tip&character=nayeli) |
-
-## 私密空间
-
-| 角色 | 链接 |
-| --- | --- |
-| Elio | [打开 Elio 私密空间](http://localhost:3000/external-entry?target=private-room&character=elio) |
-| Maya | [打开 Maya 私密空间](http://localhost:3000/external-entry?target=private-room&character=maya) |
-| Nayeli | [打开 Nayeli 私密空间](http://localhost:3000/external-entry?target=private-room&character=nayeli) |
-
-如需为其他入口携带 PSID，在链接末尾追加 `&psid=27511427698460020`。对于不带查询参数的默认入口，请改为追加 `?psid=27511427698460020`。
@@ -11,7 +11,7 @@ export const splashStartChatButtonName = "Start Chatting";
 export const defaultCharacterSlug = "elio";
 export const defaultCharacterSplashPath = `/characters/${defaultCharacterSlug}/splash`;
 export const defaultCharacterChatPath = `/characters/${defaultCharacterSlug}/chat`;
-export const defaultCharacterProfilePath = `/profile?returnTo=%2Fcharacters%2F${defaultCharacterSlug}%2Fchat`;
+export const defaultCharacterSidebarPath = `/sidebar?returnTo=%2Fcharacters%2F${defaultCharacterSlug}%2Fchat`;
 export const defaultCharacterChatUrl = new RegExp(
  `/characters/${defaultCharacterSlug}/chat(?:\\?.*)?$`,
 );
@@ -27,7 +27,7 @@ export async function enterChatFromSplash(page: Page, options: { expectedUrl?: R
  await expect(startChatButton).toBeVisible({ timeout });
  await expect(startChatButton).toBeEnabled();
  for (let attempt = 0; attempt < 3; attempt += 1) {
-    await startChatButton.click({ timeout: 3_000 }).catch(() => {});
+    await startChatButton.click();
    try { await expect(page).toHaveURL(expectedUrl, { timeout: 3_000 }); return; } catch { await page.waitForTimeout(500); }
  }
  await expect(page).toHaveURL(expectedUrl, { timeout });
@@ -31,5 +31,5 @@ test("user can email login from other sign-in options and return to chat", async
  expect(["desktop", "android"]).toContain(loginRequest?.postDataJSON().platform);

  await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
-  await expect(page.getByRole("button", { name: "Profile" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
 });
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
 import { mockCoreApis } from "@e2e/fixtures/api-mocks";
 import {
  clearBrowserState,
-  defaultCharacterProfilePath,
+  defaultCharacterSidebarPath,
  defaultCharacterSplashPath,
  defaultCharacterChatUrl,
  enterChatFromSplash,
@@ -17,7 +17,7 @@ test.beforeEach(async ({ baseURL, context, page }) => {
  await mockCoreApis(page);
 });

-test("user can log out from the profile after email login", async ({
+test("user can log out from the sidebar after email login", async ({
  page,
 }) => {
  await enterChatFromSplash(page);
@@ -27,11 +27,11 @@ test("user can log out from the profile after email login", async ({
  await expect(page).toHaveURL(/\/auth(?:\?.*)?$/);
  await switchToEmailSignIn(page);
  await submitEmailLogin(page, { expectedUrl: defaultCharacterChatUrl });
-  await expect(page.getByRole("button", { name: "Profile" })).toBeVisible();
+  await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();

-  await page.getByRole("button", { name: "Profile" }).click();
+  await page.getByRole("button", { name: "Menu" }).click();
  await expect(page).toHaveURL(
-    new RegExp(defaultCharacterProfilePath.replace("?", "\\?") + "$"),
+    new RegExp(defaultCharacterSidebarPath.replace("?", "\\?") + "$"),
  );

  const logoutRequestPromise = page.waitForRequest("**/api/auth/logout");
@@ -1,86 +0,0 @@
-import { expect, test, type Page } from "@playwright/test";
-
-import { mockCoreApis } from "@e2e/fixtures/api-mocks";
-import {
-  clearBrowserState,
-  defaultCharacterProfilePath,
-  dismissChatInterruptions,
-  enterChatFromSplash,
-  submitEmailLogin,
-  switchToEmailSignIn,
-} from "@e2e/fixtures/test-helpers";
-
-const characters = [
-  { slug: "elio", displayName: "Elio Silvestri" },
-  { slug: "maya", displayName: "Maya Tan" },
-  { slug: "nayeli", displayName: "Nayeli Cervantes" },
-] as const;
-
-test.beforeEach(async ({ baseURL, context, page }) => {
-  await clearBrowserState(context, page, baseURL);
-  await mockCoreApis(page);
-});
-
-test("guest user avatar returns to Profile after sign-in", async ({
-  page,
-}) => {
-  await enterChatFromSplash(page, { timeout: 30_000 });
-  await sendMessage(page, "Open my profile");
-
-  await page.getByRole("button", { name: "Open profile" }).click();
-
-  await expect(page).toHaveURL(/\/auth\?redirect=/);
-  expect(new URL(page.url()).searchParams.get("redirect")).toBe(
-    defaultCharacterProfilePath,
-  );
-  await switchToEmailSignIn(page);
-  await submitEmailLogin(page, {
-    expectedUrl: new RegExp(
-      `${defaultCharacterProfilePath.replace("?", "\\?")}$`,
-    ),
-  });
-});
-
-for (const character of characters) {
-  test(`${character.displayName} avatar opens the matching Private Room`, async ({
-    page,
-  }) => {
-    await enterCharacterChat(page, character.slug);
-    await sendMessage(page, `Hello ${character.displayName}`);
-
-    await page
-      .getByRole("button", {
-        name: `Open ${character.displayName}'s private room`,
-      })
-      .last()
-      .click();
-
-    await expect(page).toHaveURL(
-      new RegExp(`/characters/${character.slug}/private-room(?:\\?.*)?$`),
-    );
-  });
-}
-
-async function enterCharacterChat(page: Page, characterSlug: string) {
-  const chatPath = `/characters/${characterSlug}/chat`;
-
-  await page.goto(`/characters/${characterSlug}/splash`);
-  await page.getByRole("button", { name: "Start Chatting" }).click();
-  await expect(page).toHaveURL(new RegExp(`${chatPath}(?:\\?.*)?$`));
-  await dismissChatInterruptions(page);
-  await expect(page.getByRole("textbox", { name: "Message" })).toBeEnabled({
-    timeout: 20_000,
-  });
-}
-
-async function sendMessage(page: Page, message: string) {
-  await dismissChatInterruptions(page);
-  const messageInput = page.getByRole("textbox", { name: "Message" });
-
-  await expect(messageInput).toBeEnabled({ timeout: 20_000 });
-  await messageInput.fill(message);
-  await messageInput.press("Enter");
-  await expect(page.getByRole("button", { name: "Open profile" })).toBeVisible({
-    timeout: 10_000,
-  });
-}
@@ -42,7 +42,7 @@ test.describe("pre-release email login smoke", () => {
      urlTimeout: 20_000,
    });

-    await expect(page.getByRole("button", { name: "Profile" })).toBeVisible();
+    await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
    await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
  });
 });
@@ -25,7 +25,7 @@
    "test:e2e:chrome": "PLAYWRIGHT_USE_SYSTEM_CHROME=1 playwright test --project=mock-chromium",
    "test:e2e:headed": "playwright test --project=mock-chromium --headed",
    "test:e2e:ui": "playwright test --ui",
-    "test:e2e:mobile-smoke": "playwright test --project=mock-mobile-chrome e2e/specs/mock/auth/email-login-from-other-options.spec.ts e2e/specs/mock/auth/logout-from-profile.spec.ts e2e/specs/mock/chat/chat-send-token-refresh-retry.spec.ts e2e/specs/mock/unlock-message/image-unlock-insufficient-credits.spec.ts",
+    "test:e2e:mobile-smoke": "playwright test --project=mock-mobile-chrome e2e/specs/mock/auth/email-login-from-other-options.spec.ts e2e/specs/mock/auth/logout-from-sidebar.spec.ts e2e/specs/mock/chat/chat-send-token-refresh-retry.spec.ts e2e/specs/mock/unlock-message/image-unlock-insufficient-credits.spec.ts",
    "test:e2e:real": "E2E_REAL_BACKEND=1 PLAYWRIGHT_BASE_URL=${PLAYWRIGHT_BASE_URL:-https://frontend-test.banlv-ai.com} E2E_API_BASE_URL=${E2E_API_BASE_URL:-https://proapi.banlv-ai.com} playwright test --project=real-backend",
    "test:e2e:prod": "E2E_REAL_BACKEND=1 PLAYWRIGHT_BASE_URL=${PLAYWRIGHT_BASE_URL:-https://cozsweet.com} E2E_API_BASE_URL=${E2E_API_BASE_URL:-https://proapi.banlv-ai.com} playwright test --project=prod-smoke",
    "contract:check": "node scripts/contracts/check-openapi.mjs",
@@ -79,34 +79,4 @@ describe("shared Tailwind components", () => {
    expect(guestHtml).toContain('aria-label="Guest avatar"');
    expect(guestHtml).toContain("%2Fimages%2Favatar%2Fplaceholder.png");
  });
-
-  it("renders interactive avatars as accessible buttons", () => {
-    const characterHtml = renderToStaticMarkup(
-      <CharacterAvatar
-        src="/images/avatar/elio.png"
-        alt="Elio Silvestri"
-        actionLabel="Open Elio's private room"
-        analyticsKey="chat.open_private_room_from_avatar"
-        onClick={() => undefined}
-      />,
-    );
-    const userHtml = renderToStaticMarkup(
-      <UserMessageAvatar
-        actionLabel="Open profile"
-        analyticsKey="chat.open_profile_from_avatar"
-        onClick={() => undefined}
-      />,
-    );
-
-    expect(characterHtml).toContain('<button type="button"');
-    expect(characterHtml).toContain(
-      'aria-label="Open Elio&#x27;s private room"',
-    );
-    expect(characterHtml).toContain(
-      'data-analytics-key="chat.open_private_room_from_avatar"',
-    );
-    expect(userHtml).toContain('<button type="button"');
-    expect(userHtml).toContain('aria-label="Open profile"');
-    expect(userHtml).toContain("focus-visible:outline-3");
-  });
 });
@@ -1,11 +0,0 @@
-export type AvatarInteractionProps =
-  | {
-      onClick?: undefined;
-      actionLabel?: never;
-      analyticsKey?: never;
-    }
-  | {
-      onClick: () => void;
-      actionLabel: string;
-      analyticsKey?: string;
-    };
@@ -3,9 +3,7 @@
 import Image from "next/image";
 import type { CSSProperties } from "react";

-import type { AvatarInteractionProps } from "./avatar-interaction";
-
-interface CharacterAvatarVisualProps {
+export interface CharacterAvatarProps {
  src: string;
  alt: string;
  className?: string;
@@ -14,9 +12,6 @@ interface CharacterAvatarVisualProps {
  priority?: boolean;
 }

-export type CharacterAvatarProps = CharacterAvatarVisualProps &
-  AvatarInteractionProps;
-
 export function CharacterAvatar({
  src,
  alt,
@@ -24,9 +19,6 @@ export function CharacterAvatar({
  size = 43,
  imageSize,
  priority = false,
-  onClick,
-  actionLabel,
-  analyticsKey,
 }: CharacterAvatarProps) {
  const resolvedImageSize =
    imageSize ?? (typeof size === "number" ? size : 96);
@@ -35,16 +27,16 @@ export function CharacterAvatar({
    height: size,
  };

-  const avatarClassName = [
-    "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border-0 bg-(--color-avatar-border,#fbf3f5)",
-    onClick
-      ? "cursor-pointer p-0 transition-transform duration-150 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-accent active:scale-96"
-      : undefined,
+  return (
+    <span
+      className={[
+        "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-(--color-avatar-border,#fbf3f5)",
        className,
      ]
        .filter(Boolean)
-    .join(" ");
-  const image = (
+        .join(" ")}
+      style={style}
+    >
      <Image
        src={src}
        alt={alt}
@@ -53,27 +45,6 @@ export function CharacterAvatar({
        priority={priority}
        className="size-full object-cover"
      />
-  );
-
-  if (onClick) {
-    return (
-      <button
-        type="button"
-        className={avatarClassName}
-        style={style}
-        aria-label={actionLabel}
-        data-analytics-key={analyticsKey}
-        data-analytics-label={actionLabel}
-        onClick={onClick}
-      >
-        {image}
-      </button>
-    );
-  }
-
-  return (
-    <span className={avatarClassName} style={style}>
-      {image}
    </span>
  );
 }
@@ -3,6 +3,5 @@
 */

 export * from "./back-button";
-export * from "./avatar-interaction";
 export * from "./character-avatar";
 export * from "./user-message-avatar";
@@ -2,30 +2,19 @@

 import Image from "next/image";

-import type { AvatarInteractionProps } from "./avatar-interaction";
-
-interface UserMessageAvatarVisualProps {
+export interface UserMessageAvatarProps {
  avatarUrl?: string | null;
  className?: string;
  size?: number | string;
 }

-export type UserMessageAvatarProps = UserMessageAvatarVisualProps &
-  AvatarInteractionProps;
-
 export function UserMessageAvatar({
  avatarUrl,
  className,
  size = 43,
-  onClick,
-  actionLabel,
-  analyticsKey,
 }: UserMessageAvatarProps) {
  const avatarClassName = [
    "flex shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-(--color-avatar-border,#fbf3f5) bg-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))",
-    onClick
-      ? "cursor-pointer p-0 transition-transform duration-150 focus-visible:outline-3 focus-visible:outline-offset-3 focus-visible:outline-accent active:scale-96"
-      : undefined,
    className,
  ]
    .filter(Boolean)
@@ -33,30 +22,21 @@ export function UserMessageAvatar({
  const avatarStyle = { width: size, height: size };
  const imageSize = typeof size === "number" ? size : 64;

-  const hasUserAvatar = Boolean(avatarUrl && avatarUrl.length > 0);
-  const image = (
+  if (avatarUrl && avatarUrl.length > 0) {
+    return (
+      <div
+        className={avatarClassName}
+        style={avatarStyle}
+        aria-label="User avatar"
+      >
        <Image
-      src={hasUserAvatar ? avatarUrl! : "/images/avatar/placeholder.png"}
-      alt={hasUserAvatar ? "" : "Guest"}
+          src={avatarUrl}
+          alt=""
          width={imageSize}
          height={imageSize}
          className="size-full object-cover"
        />
-  );
-
-  if (onClick) {
-    return (
-      <button
-        type="button"
-        className={avatarClassName}
-        style={avatarStyle}
-        aria-label={actionLabel}
-        data-analytics-key={analyticsKey}
-        data-analytics-label={actionLabel}
-        onClick={onClick}
-      >
-        {image}
-      </button>
+      </div>
    );
  }

@@ -64,9 +44,15 @@ export function UserMessageAvatar({
    <div
      className={avatarClassName}
      style={avatarStyle}
-      aria-label={hasUserAvatar ? "User avatar" : "Guest avatar"}
+      aria-label="Guest avatar"
    >
-      {image}
+      <Image
+        src="/images/avatar/placeholder.png"
+        alt="Guest"
+        width={imageSize}
+        height={imageSize}
+        className="size-full object-cover"
+      />
    </div>
  );
 }
@@ -15,9 +15,7 @@ import {
 } from "@/providers/character-provider";
 import { useCharacterCatalog } from "@/providers/character-catalog-provider";
 import { clearPendingChatNavigation } from "@/lib/navigation/chat_unlock_session";
-import { buildGlobalPageUrl } from "@/router/global-route-context";
-import { resolveAuthenticatedNavigation } from "@/router/navigation-resolver";
-import { getCharacterRoutes, ROUTES } from "@/router/routes";
+import { getCharacterRoutes } from "@/router/routes";

 import { MobileShell } from "@/app/_components/core";

@@ -59,10 +57,6 @@ export function ChatScreen() {
  const refreshCharacterCatalog = characterCatalog.refresh;
  const defaultCharacterSlug = characterCatalog.defaultCharacter.slug;
  const characterRoutes = useActiveCharacterRoutes();
-  const profileUrl = buildGlobalPageUrl(
-    ROUTES.profile,
-    characterRoutes.chat,
-  );
  const searchParams = useSearchParams();
  const state = useChatState();
  const chatDispatch = useChatDispatch();
@@ -240,19 +234,6 @@ export function ChatScreen() {
    });
  }

-  function handleOpenUserProfile(): void {
-    router.push(
-      resolveAuthenticatedNavigation({
-        loginStatus: authState.loginStatus,
-        targetUrl: profileUrl,
-      }),
-    );
-  }
-
-  function handleOpenCharacterPrivateRoom(): void {
-    router.push(characterRoutes.privateRoom);
-  }
-
  return (
    <MobileShell>
      <div
@@ -299,8 +280,6 @@ export function ChatScreen() {
            onUnlockVoiceMessage={handleUnlockVoiceMessage}
            onUnlockImageMessage={handleUnlockImageMessage}
            onOpenImage={handleOpenImage}
-            onUserAvatarClick={handleOpenUserProfile}
-            onCharacterAvatarClick={handleOpenCharacterPrivateRoom}
            onLoadMoreHistory={() => {
              chatDispatch({ type: "ChatLoadMoreHistoryRequested" });
            }}
@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi } from "vitest";

 import { getCharacterBySlug } from "@/data/constants/character";
 import { CharacterProvider } from "@/providers/character-provider";
@@ -18,33 +18,20 @@ import { PrivateMessageCard } from "../private-message-card";
 import { PwaInstallDialog } from "../pwa-install-dialog";
 import { TextBubble } from "../text-bubble";

-const userMocks = vi.hoisted(() => ({
-  avatarUrl: null as string | null,
-}));
-
 vi.mock("@/router/use-app-navigator", () => ({
  useAppNavigator: () => ({
    openSubscription: vi.fn(),
  }),
 }));

-vi.mock("@/stores/user/user-context", () => ({
-  useUserSelector: (
-    selector: (state: { context: { avatarUrl: string | null } }) => unknown,
-  ) => selector({ context: { avatarUrl: userMocks.avatarUrl } }),
-}));
-
 describe("chat Tailwind components", () => {
-  beforeEach(() => {
-    userMocks.avatarUrl = null;
-  });
-
  it("renders MessageAvatar AI and user branches with image utilities", () => {
    const aiHtml = renderWithCharacter(<MessageAvatar isFromAI={true} />);
    const userHtml = renderWithCharacter(
      <MessageAvatar isFromAI={false} userAvatarUrl="/user-avatar.png" />,
    );

+    expect(aiHtml).toContain('aria-label="AI avatar"');
    expect(aiHtml).toContain("size-(--chat-avatar-size,43px)");
    expect(aiHtml).toContain("size-full object-cover");
    expect(aiHtml).toContain("%2Fimages%2Favatar%2Felio.png");
@@ -52,28 +39,6 @@ describe("chat Tailwind components", () => {
    expect(userHtml).toContain("%2Fuser-avatar.png");
  });

-  it("renders message avatar actions with explicit destinations", () => {
-    const aiHtml = renderWithCharacter(
-      <MessageAvatar isFromAI={true} onClick={() => undefined} />,
-    );
-    const userHtml = renderWithCharacter(
-      <MessageAvatar isFromAI={false} onClick={() => undefined} />,
-    );
-
-    expect(aiHtml).toContain('<button type="button"');
-    expect(aiHtml).toContain(
-      'data-analytics-key="chat.open_private_room_from_avatar"',
-    );
-    expect(aiHtml).toContain(
-      'aria-label="Open Elio Silvestri&#x27;s private room"',
-    );
-    expect(userHtml).toContain('<button type="button"');
-    expect(userHtml).toContain(
-      'data-analytics-key="chat.open_profile_from_avatar"',
-    );
-    expect(userHtml).toContain('aria-label="Open profile"');
-  });
-
  it("renders the active character avatar", () => {
    const maya = getCharacterBySlug("maya");
    expect(maya).not.toBeNull();
@@ -231,18 +196,17 @@ describe("chat Tailwind components", () => {
    expect(guestHtml).toContain('aria-label="Back to home"');
    expect(guestHtml).toContain('data-analytics-key="chat.back_to_home"');
    expect(guestHtml).toContain("px-(--chat-inline-padding,16px)");
-    expect(guestHtml).not.toContain('aria-label="Profile"');
+    expect(guestHtml).not.toContain('aria-label="Menu"');
    expect(memberHtml).toContain("Offer");
    expect(memberHtml).toContain('href="/characters/elio/splash"');
    expect(memberHtml).toContain('aria-label="Back to home"');
-    expect(memberHtml).toContain('aria-label="Profile"');
-    expect(memberHtml).toContain('data-analytics-key="chat.open_profile"');
+    expect(memberHtml).toContain('aria-label="Menu"');
+    expect(memberHtml).toContain('data-analytics-key="chat.open_menu"');
    expect(memberHtml).toContain('data-analytics-key="chat.back_to_home"');
    expect(memberHtml).toContain("px-(--chat-inline-padding,16px)");
    expect(memberHtml).not.toContain("px-(--spacing-md,12px)");
    expect(memberHtml).toContain("bg-[rgba(13,11,20,0.7)]");
    expect(memberHtml).toContain("size-(--responsive-icon-button-size,42px)");
-    expect(memberHtml).toContain("lucide-user-round");
    expect(memberWithHintHtml).toContain(
      'data-analytics-key="chat.external_browser_hint"',
    );
@@ -258,26 +222,12 @@ describe("chat Tailwind components", () => {
      memberWithHintHtml.indexOf(
        'data-analytics-key="chat.external_browser_hint"',
      ),
-    ).toBeLessThan(memberWithHintHtml.indexOf('aria-label="Profile"'));
+    ).toBeLessThan(memberWithHintHtml.indexOf('aria-label="Menu"'));
    expect(guestWithHintHtml).not.toContain(
      'data-analytics-key="chat.external_browser_hint"',
    );
  });

-  it("renders the user avatar in the ChatHeader Profile action", () => {
-    userMocks.avatarUrl = "/images/avatar/profile-user.png";
-
-    const html = renderWithCharacter(<ChatHeader isGuest={false} />);
-
-    expect(html).toContain("%2Fimages%2Favatar%2Fprofile-user.png");
-    expect(html).toContain('aria-label="Profile"');
-    expect(html).toContain('data-analytics-key="chat.open_profile"');
-    expect(html).toContain(
-      "var(--responsive-icon-button-size, 42px)",
-    );
-    expect(html).not.toContain("lucide-user-round");
-  });
-
  it("links guest chat back to the active character splash", () => {
    const maya = getCharacterBySlug("maya");
    if (!maya) throw new Error("Missing Maya character fixture");
@@ -289,7 +239,7 @@ describe("chat Tailwind components", () => {
    );

    expect(html).toContain('href="/characters/maya/splash"');
-    expect(html).not.toContain('aria-label="Profile"');
+    expect(html).not.toContain('aria-label="Menu"');
    expect(html).not.toContain(
      'data-analytics-key="chat.external_browser_hint"',
    );
@@ -59,8 +59,6 @@ export interface ChatAreaProps {
  onUnlockImageMessage?: ChatMessageAction;
  onOpenImage?: (displayMessageId: string) => void;
  onLoadMoreHistory?: () => void;
-  onUserAvatarClick?: () => void;
-  onCharacterAvatarClick?: () => void;
 }

 type ChatMessageAction = (
@@ -83,8 +81,6 @@ export function ChatArea({
  onUnlockImageMessage,
  onOpenImage,
  onLoadMoreHistory,
-  onUserAvatarClick,
-  onCharacterAvatarClick,
 }: ChatAreaProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);
@@ -255,8 +251,6 @@ export function ChatArea({
          onUnlockVoiceMessage,
          onUnlockImageMessage,
          onOpenImage,
-          onUserAvatarClick,
-          onCharacterAvatarClick,
        )}

        {isReplyingAI ? (
@@ -293,8 +287,6 @@ function renderMessagesWithDateHeaders(
  onUnlockVoiceMessage?: ChatMessageAction,
  onUnlockImageMessage?: ChatMessageAction,
  onOpenImage?: (displayMessageId: string) => void,
-  onUserAvatarClick?: () => void,
-  onCharacterAvatarClick?: () => void,
 ) {
  return buildChatRenderItems(messages, getMessageKey).map((item) =>
    item.type === "date" ? (
@@ -322,8 +314,6 @@ function renderMessagesWithDateHeaders(
        onUnlockVoiceMessage={onUnlockVoiceMessage}
        onUnlockImageMessage={onUnlockImageMessage}
        onOpenImage={onOpenImage}
-        onUserAvatarClick={onUserAvatarClick}
-        onCharacterAvatarClick={onCharacterAvatarClick}
      />
    ),
  );
@@ -2,17 +2,17 @@
 /**
 * ChatHeader 顶部栏
 *
- * Profile 优先展示用户头像；头像缺失时回退到 lucide-react <UserRound />。
+ * 图标：lucide-react <Lock />（游客 banner）+ <Menu />（菜单按钮）
+ *   tree-shakable，currentColor 继承父 color
 */
 import type { ReactNode } from "react";
-import { Lock, UserRound } from "lucide-react";
+import { Lock, Menu } from "lucide-react";

-import { BackButton, UserMessageAvatar } from "@/app/_components";
+import { BackButton } from "@/app/_components";
 import { useActiveCharacterRoutes } from "@/providers/character-provider";
 import { buildGlobalPageUrl } from "@/router/global-route-context";
 import { ROUTES } from "@/router/routes";
 import { useAppNavigator } from "@/router/use-app-navigator";
-import { useUserSelector } from "@/stores/user/user-context";

 import { BrowserHintOverlay } from "./browser-hint-overlay";

@@ -29,10 +29,6 @@ export function ChatHeader({
 }: ChatHeaderProps) {
  const navigator = useAppNavigator();
  const characterRoutes = useActiveCharacterRoutes();
-  const avatarUrl = useUserSelector((state) => state.context.avatarUrl);
-  const handleOpenProfile = () => {
-    navigator.push(buildGlobalPageUrl(ROUTES.profile, characterRoutes.chat));
-  };

  return (
    <header className="flex shrink-0 flex-col items-stretch bg-transparent p-0">
@@ -76,26 +72,20 @@ export function ChatHeader({
              {showBrowserHint ? <BrowserHintOverlay /> : null}
            </div>

-            {avatarUrl ? (
-              <UserMessageAvatar
-                avatarUrl={avatarUrl}
-                size="var(--responsive-icon-button-size, 42px)"
-                actionLabel="Profile"
-                analyticsKey="chat.open_profile"
-                onClick={handleOpenProfile}
-              />
-            ) : (
            <button
              type="button"
-                data-analytics-key="chat.open_profile"
-                data-analytics-label="Open profile"
+              data-analytics-key="chat.open_menu"
+              data-analytics-label="Open chat menu"
              className="flex size-(--responsive-icon-button-size,42px) cursor-pointer items-center justify-center rounded-full border border-[rgba(255,255,255,0.12)] bg-[rgba(13,11,20,0.7)] text-(--color-text-primary,#fff) shadow-[0_10px_24px_rgba(0,0,0,0.2)] backdrop-blur-md transition-[background,transform] duration-150 hover:bg-[rgba(28,24,39,0.82)] active:scale-96 focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-[#f657a0]"
-                onClick={handleOpenProfile}
-                aria-label="Profile"
+              onClick={() =>
+                navigator.push(
+                  buildGlobalPageUrl(ROUTES.sidebar, characterRoutes.chat),
+                )
+              }
+              aria-label="Menu"
            >
-                <UserRound size={24} aria-hidden="true" />
+              <Menu size={24} aria-hidden="true" />
            </button>
-            )}
          </>
        ) : null}
      </div>
@@ -1,61 +1,32 @@
 "use client";
+import Image from "next/image";

-import { CharacterAvatar, UserMessageAvatar } from "@/app/_components";
+import { UserMessageAvatar } from "@/app/_components";
 import { useActiveCharacter } from "@/providers/character-provider";

 export interface MessageAvatarProps {
  isFromAI: boolean;
  userAvatarUrl?: string | null;
-  onClick?: () => void;
 }

 const AVATAR_CLASS_NAME =
-  "size-(--chat-avatar-size,43px) ring-2 ring-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))";
+  "flex size-(--chat-avatar-size,43px) shrink-0 items-center justify-center overflow-hidden rounded-full border-2 border-(--color-avatar-border,#fbf3f5) bg-(--color-avatar-border,#fbf3f5) shadow-(--shadow-input-box,0_1px_2px_rgba(0,0,0,0.1))";

-export function MessageAvatar({
-  isFromAI,
-  userAvatarUrl,
-  onClick,
-}: MessageAvatarProps) {
+export function MessageAvatar({ isFromAI, userAvatarUrl }: MessageAvatarProps) {
  const character = useActiveCharacter();

  if (isFromAI) {
-    if (onClick) {
    return (
-        <CharacterAvatar
+      <div className={AVATAR_CLASS_NAME} aria-label="AI avatar">
+        <Image
          src={character.assets.avatar}
          alt={character.displayName}
-          size="var(--chat-avatar-size, 43px)"
-          imageSize={43}
+          width={43}
+          height={43}
          priority
-          className={AVATAR_CLASS_NAME}
-          actionLabel={`Open ${character.displayName}'s private room`}
-          analyticsKey="chat.open_private_room_from_avatar"
-          onClick={onClick}
-        />
-      );
-    }
-
-    return (
-      <CharacterAvatar
-        src={character.assets.avatar}
-        alt={character.displayName}
-        size="var(--chat-avatar-size, 43px)"
-        imageSize={43}
-        priority
-        className={AVATAR_CLASS_NAME}
-      />
-    );
-  }
-
-  if (onClick) {
-    return (
-      <UserMessageAvatar
-        avatarUrl={userAvatarUrl}
-        actionLabel="Open profile"
-        analyticsKey="chat.open_profile_from_avatar"
-        onClick={onClick}
+          className="size-full object-cover"
        />
+      </div>
    );
  }

@@ -32,8 +32,6 @@ export interface MessageBubbleProps {
  onUnlockVoiceMessage?: ChatMessageAction;
  onUnlockImageMessage?: ChatMessageAction;
  onOpenImage?: (displayMessageId: string) => void;
-  onUserAvatarClick?: () => void;
-  onCharacterAvatarClick?: () => void;
 }

 type ChatMessageAction = (
@@ -59,8 +57,6 @@ export function MessageBubble({
  onUnlockVoiceMessage,
  onUnlockImageMessage,
  onOpenImage,
-  onUserAvatarClick,
-  onCharacterAvatarClick,
 }: MessageBubbleProps) {
  const avatarUrl = useUserSelector((state) => state.context.avatarUrl);

@@ -71,10 +67,7 @@ export function MessageBubble({
        data-chat-message-id={displayMessageId}
        aria-label="AI message"
      >
-        <MessageAvatar
-          isFromAI={true}
-          onClick={onCharacterAvatarClick}
-        />
+        <MessageAvatar isFromAI={true} />
        <div className={styles.bubbleInlineSpacer} aria-hidden="true" />
        <MessageContent
          characterId={characterId}
@@ -127,11 +120,7 @@ export function MessageBubble({
        onOpenImage={onOpenImage}
      />
      <div className={styles.bubbleInlineSpacer} aria-hidden="true" />
-      <MessageAvatar
-        isFromAI={false}
-        userAvatarUrl={avatarUrl}
-        onClick={onUserAvatarClick}
-      />
+      <MessageAvatar isFromAI={false} userAvatarUrl={avatarUrl} />
    </div>
  );
 }
@@ -22,14 +22,14 @@ vi.mock("@/stores/user/user-context", () => ({
 }));

 describe("CoinsRulesScreen", () => {
-  it("renders outside CharacterProvider and returns to global profile", () => {
+  it("renders outside CharacterProvider and returns to global sidebar", () => {
    const html = renderToStaticMarkup(
      <CoinsRulesScreen returnTo="/characters/maya/chat" />,
    );

    expect(html).toContain("Coin Usage Rules");
    expect(html).toContain(
-      'href="/profile?returnTo=%2Fcharacters%2Fmaya%2Fchat"',
+      'href="/sidebar?returnTo=%2Fcharacters%2Fmaya%2Fchat"',
    );
  });
 });
@@ -118,9 +118,9 @@ export function CoinsRulesScreen({ returnTo }: CoinsRulesScreenProps) {
      <main className={styles.screen}>
        <header className={styles.header}>
          <BackButton
-            href={navigation.profileUrl}
+            href={navigation.sidebarUrl}
            variant="soft"
-            aria-label="Back to profile"
+            aria-label="Back to sidebar"
          />

          <div className={styles.hero}>
@@ -69,9 +69,9 @@ describe("FeedbackScreen", () => {
    ).toBe("feedback-content-hint");
    expect(
      container.querySelector<HTMLAnchorElement>(
-        '[data-analytics-key="feedback.back_to_profile"]',
+        '[data-analytics-key="feedback.back_to_sidebar"]',
      )?.getAttribute("href"),
-    ).toBe("/profile?returnTo=%2Fcharacters%2Fmaya%2Fchat");
+    ).toBe("/sidebar?returnTo=%2Fcharacters%2Fmaya%2Fchat");
  });

  it("submits valid text and renders the feedback id", async () => {
@@ -106,7 +106,7 @@ describe("FeedbackScreen", () => {
    });
    expect(container.textContent).toContain("feedback-123");
    expect(container.textContent).toContain("Thank you for helping us.");
-    expect(container.textContent).toContain("Back to Profile");
+    expect(container.textContent).toContain("Back to Sidebar");
  });
 });

@@ -77,11 +77,11 @@ export function FeedbackScreen({ returnTo }: FeedbackScreenProps) {
            </div>
            <button
              type="button"
-              data-analytics-key="feedback.back_to_profile"
+              data-analytics-key="feedback.back_to_sidebar"
              className={styles.primaryButton}
-              onClick={() => navigator.replace(navigation.profileUrl)}
+              onClick={() => navigator.replace(navigation.sidebarUrl)}
            >
-              Back to Profile
+              Back to Sidebar
            </button>
          </section>
        </main>
@@ -102,10 +102,10 @@ export function FeedbackScreen({ returnTo }: FeedbackScreenProps) {

        <header className={styles.header}>
          <BackButton
-            href={navigation.profileUrl}
+            href={navigation.sidebarUrl}
            variant="soft"
-            ariaLabel="Back to profile"
-            analyticsKey="feedback.back_to_profile"
+            ariaLabel="Back to sidebar"
+            analyticsKey="feedback.back_to_sidebar"
          />
          <div className={styles.headingBlock}>
            <h1 className={styles.title}>Help us improve CozSweet</h1>
@@ -1,72 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import {
-  getResistedGalleryDragDistance,
-  resolveGallerySwipeDirection,
-} from "../private-album-gallery-motion";
-
-describe("private album Gallery motion", () => {
-  it("switches after crossing the viewport distance threshold", () => {
-    expect(
-      resolveGallerySwipeDirection({
-        distance: -72,
-        durationMs: 500,
-        viewportWidth: 390,
-        hasPrevious: true,
-        hasNext: true,
-      }),
-    ).toBe(1);
-    expect(
-      resolveGallerySwipeDirection({
-        distance: 72,
-        durationMs: 500,
-        viewportWidth: 390,
-        hasPrevious: true,
-        hasNext: true,
-      }),
-    ).toBe(-1);
-  });
-
-  it("switches on a short fast swipe but not a slow short drag", () => {
-    const baseInput = {
-      distance: -30,
-      viewportWidth: 390,
-      hasPrevious: true,
-      hasNext: true,
-    };
-
-    expect(
-      resolveGallerySwipeDirection({ ...baseInput, durationMs: 50 }),
-    ).toBe(1);
-    expect(
-      resolveGallerySwipeDirection({ ...baseInput, durationMs: 500 }),
-    ).toBe(0);
-  });
-
-  it("does not move beyond the first or last image", () => {
-    expect(
-      resolveGallerySwipeDirection({
-        distance: 100,
-        durationMs: 100,
-        viewportWidth: 390,
-        hasPrevious: false,
-        hasNext: true,
-      }),
-    ).toBe(0);
-    expect(
-      resolveGallerySwipeDirection({
-        distance: -100,
-        durationMs: 100,
-        viewportWidth: 390,
-        hasPrevious: true,
-        hasNext: false,
-      }),
-    ).toBe(0);
-  });
-
-  it("applies resistance only while pulling past an edge", () => {
-    expect(getResistedGalleryDragDistance(100, false, true)).toBeCloseTo(28);
-    expect(getResistedGalleryDragDistance(-100, true, false)).toBeCloseTo(-28);
-    expect(getResistedGalleryDragDistance(-100, false, true)).toBe(-100);
-  });
-});
@@ -1,51 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { PrivateAlbumSchema } from "@/data/schemas/private-room";
-
-import {
-  findPrivateAlbumDisplayImage,
-  getPrivateAlbumDisplayImages,
-  getPrivateAlbumGridLayout,
-} from "../private-album-images";
-
-describe("private album display images", () => {
-  const album = PrivateAlbumSchema.parse({
-    albumId: "album-1",
-    images: [
-      { url: " /images/photo-1.png ", locked: false, index: 0 },
-      { url: "/images/photo-2.png", locked: true, index: 1 },
-      { url: "  ", locked: false, index: 2 },
-      { url: "/images/photo-4.png", locked: false, index: 3 },
-    ],
-    unlocked: true,
-    lockDetail: { locked: false },
-  });
-
-  it("filters unavailable images while preserving source indexes", () => {
-    expect(getPrivateAlbumDisplayImages(album)).toEqual([
-      { sourceIndex: 0, url: "/images/photo-1.png" },
-      { sourceIndex: 3, url: "/images/photo-4.png" },
-    ]);
-  });
-
-  it("resolves Gallery images by their original source index", () => {
-    expect(findPrivateAlbumDisplayImage(album, 3)).toEqual({
-      sourceIndex: 3,
-      url: "/images/photo-4.png",
-    });
-    expect(findPrivateAlbumDisplayImage(album, 1)).toBeNull();
-    expect(findPrivateAlbumDisplayImage(album, 2)).toBeNull();
-  });
-
-  it.each([
-    [0, "empty"],
-    [1, "single"],
-    [2, "double"],
-    [3, "triple"],
-    [4, "double"],
-    [5, "triple"],
-    [9, "triple"],
-  ] as const)("uses the expected grid for %i images", (count, layout) => {
-    expect(getPrivateAlbumGridLayout(count)).toBe(layout);
-  });
-});
@@ -1,67 +0,0 @@
-/* @vitest-environment jsdom */
-
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-import { PrivateAlbumSchema } from "@/data/schemas/private-room";
-
-import { PrivateAlbumCard } from "../private-album-card";
-
-describe("PrivateAlbumCard interactions", () => {
-  let container: HTMLDivElement;
-  let root: Root;
-
-  beforeEach(() => {
-    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
-      .IS_REACT_ACT_ENVIRONMENT = true;
-    container = document.createElement("div");
-    document.body.append(container);
-    root = createRoot(container);
-  });
-
-  afterEach(() => {
-    act(() => root.unmount());
-    container.remove();
-  });
-
-  it("opens the selected thumbnail with its original source index", () => {
-    const onOpenGallery = vi.fn();
-    const album = PrivateAlbumSchema.parse({
-      albumId: "album-1",
-      title: "Private afternoon",
-      imageCount: 4,
-      images: [
-        { url: "", locked: false, index: 0 },
-        { url: "/images/private-room/locked.png", locked: true, index: 1 },
-        { url: "/images/private-room/photo-2.png", locked: false, index: 2 },
-        { url: "/images/private-room/photo-3.png", locked: false, index: 3 },
-      ],
-      locked: false,
-      unlocked: true,
-      lockDetail: { locked: false },
-    });
-
-    act(() => {
-      root.render(
-        <PrivateAlbumCard
-          album={album}
-          displayName="Elio Silvestri"
-          avatarUrl="/images/avatar/elio.png"
-          index={0}
-          isUnlocking={false}
-          onOpenGallery={onOpenGallery}
-          onUnlock={() => undefined}
-        />,
-      );
-    });
-
-    const thumbnail = container.querySelector<HTMLButtonElement>(
-      'button[data-image-index="3"]',
-    );
-    act(() => thumbnail?.click());
-
-    expect(onOpenGallery).toHaveBeenCalledOnce();
-    expect(onOpenGallery).toHaveBeenCalledWith(3);
-  });
-});
@@ -43,10 +43,10 @@ function renderCard(album: PrivateAlbum): string {
 }

 describe("PrivateAlbumCard", () => {
-  it("renders every available unlocked image in the adaptive grid", () => {
+  it("renders only the first unlocked image and its photo count", () => {
    const html = renderCard(
      makeAlbum({
-        imageCount: 2,
+        imageCount: 8,
        images: [
          { url: COVER_URL, locked: false, index: 0 },
          {
@@ -59,48 +59,13 @@ describe("PrivateAlbumCard", () => {
    );

    expect(html).toContain("elio.png");
-    expect(html).toContain("%2Fimages%2Fcover%2Felio.png");
-    expect(html).toContain('data-grid-layout="double"');
-    expect(html).toContain('data-image-index="0"');
-    expect(html).toContain('data-image-index="1"');
+    expect(html).not.toContain("%2Fimages%2Fcover%2Felio.png");
+    expect(html).toContain("8 photos");
    expect(html).toContain("A quiet morning by the water.");
-    expect(html).toContain(
-      'aria-label="Open photo 2 of 2 from Elio Silvestri"',
-    );
+    expect(html).toContain('aria-label="Open 8 private album photos"');
    expect(html).toContain('data-analytics-key="private_album.open_gallery"');
  });

-  it.each([
-    { count: 1, layout: "single" },
-    { count: 2, layout: "double" },
-    { count: 3, layout: "triple" },
-    { count: 4, layout: "double" },
-    { count: 5, layout: "triple" },
-    { count: 9, layout: "triple" },
-  ])("uses the $layout layout for $count images", ({ count, layout }) => {
-    const html = renderCard(
-      makeAlbum({
-        imageCount: count,
-        images: makeImages(count),
-      }),
-    );
-
-    expect(html).toContain(`data-grid-layout="${layout}"`);
-  });
-
-  it("limits the preview to nine images and shows the remaining count", () => {
-    const html = renderCard(
-      makeAlbum({
-        imageCount: 12,
-        images: makeImages(12),
-      }),
-    );
-
-    expect(html.match(/data-image-index=/g)).toHaveLength(9);
-    expect(html).toContain("+3");
-    expect(html).not.toContain('data-image-index="9"');
-  });
-
  it("uses the backend first image as the locked cover", () => {
    const html = renderCard(
      makeAlbum({
@@ -128,11 +93,3 @@ describe("PrivateAlbumCard", () => {
    expect(html).toContain("No photo available");
  });
 });
-
-function makeImages(count: number) {
-  return Array.from({ length: count }, (_, index) => ({
-    url: `/images/private-room/photo-${index}.png`,
-    locked: false,
-    index,
-  }));
-}
@@ -1,154 +0,0 @@
-/* @vitest-environment jsdom */
-
-import { act } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-import { PrivateAlbumSchema } from "@/data/schemas/private-room";
-
-import { PrivateAlbumGallery } from "../private-album-gallery";
-
-const album = PrivateAlbumSchema.parse({
-  albumId: "album-1",
-  title: "Private afternoon",
-  imageCount: 5,
-  images: [
-    { url: "/images/private-room/photo-0.png", locked: false, index: 0 },
-    { url: "", locked: false, index: 1 },
-    { url: "/images/private-room/locked.png", locked: true, index: 2 },
-    { url: "/images/private-room/photo-3.png", locked: false, index: 3 },
-    { url: "/images/private-room/photo-4.png", locked: false, index: 4 },
-  ],
-  locked: false,
-  unlocked: true,
-  lockDetail: { locked: false },
-});
-
-describe("PrivateAlbumGallery", () => {
-  let container: HTMLDivElement;
-  let root: Root;
-  let onClose: () => void;
-  let onImageIndexChange: (index: number) => void;
-
-  beforeEach(() => {
-    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean })
-      .IS_REACT_ACT_ENVIRONMENT = true;
-    Object.defineProperties(HTMLElement.prototype, {
-      setPointerCapture: {
-        configurable: true,
-        value: vi.fn(),
-      },
-      hasPointerCapture: {
-        configurable: true,
-        value: vi.fn(() => true),
-      },
-      releasePointerCapture: {
-        configurable: true,
-        value: vi.fn(),
-      },
-    });
-    onClose = vi.fn();
-    onImageIndexChange = vi.fn();
-    container = document.createElement("div");
-    document.body.append(container);
-    root = createRoot(container);
-  });
-
-  afterEach(() => {
-    act(() => root.unmount());
-    container.remove();
-  });
-
-  it("follows a drag and switches to the next available source index", () => {
-    renderGallery(0);
-    const viewport = getViewport();
-    Object.defineProperty(viewport, "clientWidth", {
-      configurable: true,
-      value: 390,
-    });
-
-    dispatchPointer(viewport, "pointerdown", 300);
-    dispatchPointer(viewport, "pointermove", 200);
-    expect(viewport.querySelector<HTMLElement>("[aria-hidden=false]")?.style.getPropertyValue("--gallery-drag-offset")).toBe("-100px");
-    dispatchPointer(viewport, "pointerup", 200);
-
-    expect(onImageIndexChange).toHaveBeenCalledWith(3);
-    expect(container.textContent).toContain("2 / 3");
-  });
-
-  it("snaps back on pointer cancellation without changing images", () => {
-    renderGallery(3);
-    const viewport = getViewport();
-    Object.defineProperty(viewport, "clientWidth", {
-      configurable: true,
-      value: 390,
-    });
-
-    dispatchPointer(viewport, "pointerdown", 300);
-    dispatchPointer(viewport, "pointermove", 200);
-    dispatchPointer(viewport, "pointercancel", 200);
-
-    expect(onImageIndexChange).not.toHaveBeenCalled();
-    expect(container.textContent).toContain("2 / 3");
-  });
-
-  it("uses the same available indexes for controls and keyboard navigation", () => {
-    renderGallery(3);
-
-    act(() => {
-      container
-        .querySelector<HTMLButtonElement>('button[aria-label="Next photo"]')
-        ?.click();
-    });
-    expect(onImageIndexChange).toHaveBeenLastCalledWith(4);
-
-    act(() => {
-      document.dispatchEvent(
-        new KeyboardEvent("keydown", { key: "ArrowLeft", bubbles: true }),
-      );
-    });
-    expect(onImageIndexChange).toHaveBeenLastCalledWith(3);
-
-    act(() => {
-      document.dispatchEvent(
-        new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
-      );
-    });
-    expect(onClose).toHaveBeenCalledOnce();
-  });
-
-  function renderGallery(imageIndex: number): void {
-    act(() => {
-      root.render(
-        <PrivateAlbumGallery
-          album={album}
-          imageIndex={imageIndex}
-          onClose={onClose}
-          onImageIndexChange={onImageIndexChange}
-        />,
-      );
-    });
-  }
-
-  function getViewport(): HTMLDivElement {
-    const viewport = container.querySelector<HTMLDivElement>(
-      '[data-testid="private-album-gallery-viewport"]',
-    );
-    if (!viewport) throw new Error("Missing Gallery viewport");
-    return viewport;
-  }
-});
-
-function dispatchPointer(
-  target: HTMLElement,
-  type: "pointerdown" | "pointermove" | "pointerup" | "pointercancel",
-  clientX: number,
-): void {
-  const event = new MouseEvent(type, {
-    bubbles: true,
-    button: 0,
-    clientX,
-  });
-  Object.defineProperty(event, "pointerId", { value: 1 });
-  act(() => target.dispatchEvent(event));
-}
@@ -6,12 +6,6 @@ import { CharacterAvatar } from "@/app/_components";
 import type { PrivateAlbum } from "@/data/schemas/private-room";
 import { isPrivateAlbumLocked } from "@/lib/private-room/private_album";

-import {
-  getPrivateAlbumDisplayImages,
-  getPrivateAlbumGridLayout,
-  PRIVATE_ALBUM_GRID_LIMIT,
-} from "../private-album-images";
-
 import styles from "../private-room-screen.module.css";

 export interface PrivateAlbumCardProps {
@@ -20,7 +14,7 @@ export interface PrivateAlbumCardProps {
  avatarUrl: string;
  index: number;
  isUnlocking: boolean;
-  onOpenGallery: (imageIndex: number) => void;
+  onOpenGallery: () => void;
  onUnlock: () => void;
 }

@@ -37,19 +31,6 @@ export function PrivateAlbumCard({
  const firstImage = album.images[0];
  const firstImageUrl = firstImage?.url || null;
  const photoCount = album.imageCount || album.images.length;
-  const displayImages = getPrivateAlbumDisplayImages(album);
-  const previewImages = displayImages.slice(0, PRIVATE_ALBUM_GRID_LIMIT);
-  const gridLayout = getPrivateAlbumGridLayout(previewImages.length);
-  const overflowCount = Math.max(
-    0,
-    displayImages.length - PRIVATE_ALBUM_GRID_LIMIT,
-  );
-  const gridLayoutClassName =
-    gridLayout === "single"
-      ? styles.mediaGridSingle
-      : gridLayout === "double"
-        ? styles.mediaGridDouble
-        : styles.mediaGridTriple;

  return (
    <article
@@ -111,39 +92,30 @@ export function PrivateAlbumCard({
            </div>
          </div>
        </button>
-      ) : previewImages.length > 0 ? (
-        <div
-          className={`${styles.mediaGrid} ${gridLayoutClassName}`}
-          data-grid-layout={gridLayout}
-          data-image-count={displayImages.length}
-        >
-          {previewImages.map((image, imagePosition) => (
+      ) : firstImageUrl ? (
        <button
          type="button"
-              key={`${image.sourceIndex}:${image.url}`}
          data-analytics-key="private_album.open_gallery"
          data-analytics-label="Open private album gallery"
-              data-image-index={image.sourceIndex}
-              className={styles.mediaGridItem}
-              onClick={() => onOpenGallery(image.sourceIndex)}
-              aria-label={`Open photo ${imagePosition + 1} of ${displayImages.length} from ${displayName}`}
+          className={styles.mediaCover}
+          onClick={onOpenGallery}
+          aria-label={`Open ${photoCount} private album photos`}
        >
          <Image
-                src={image.url}
-                alt=""
-                fill
-                sizes={getGridImageSizes(gridLayout)}
-                className={styles.mediaGridImage}
+            src={firstImageUrl}
+            alt={`${album.title || displayName} private album`}
+            width={720}
+            height={900}
+            className={styles.momentCoverImage}
+            sizes="(max-width: 540px) calc(100vw - 36px), 484px"
          />
-              {imagePosition === PRIVATE_ALBUM_GRID_LIMIT - 1 &&
-              overflowCount > 0 ? (
-                <span className={styles.mediaGridOverflow} aria-hidden="true">
-                  +{overflowCount}
+          {photoCount > 1 ? (
+            <span className={styles.mediaCountBadge}>
+              <ImageIcon size={13} aria-hidden="true" />
+              {photoCount} photos
            </span>
          ) : null}
        </button>
-          ))}
-        </div>
      ) : (
        <div
          className={styles.emptyMediaCover}
@@ -160,12 +132,6 @@ export function PrivateAlbumCard({
  );
 }

-function getGridImageSizes(layout: string): string {
-  if (layout === "single") return "(max-width: 540px) 68vw, 280px";
-  if (layout === "double") return "(max-width: 540px) 34vw, 154px";
-  return "(max-width: 540px) 29vw, 150px";
-}
-
 function formatAlbumTime(value: string | null): string {
  if (!value) return "";
  const date = new Date(value);
@@ -1,23 +1,11 @@
 "use client";

-import {
-  type CSSProperties,
-  type PointerEvent as ReactPointerEvent,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useEffect, useRef } from "react";
 import Image from "next/image";
 import { ChevronLeft, ChevronRight, X } from "lucide-react";

 import type { PrivateAlbum } from "@/data/schemas/private-room";

-import {
-  getResistedGalleryDragDistance,
-  resolveGallerySwipeDirection,
-} from "../private-album-gallery-motion";
-import { getPrivateAlbumDisplayImages } from "../private-album-images";
 import styles from "../private-room-screen.module.css";

 export interface PrivateAlbumGalleryProps {
@@ -27,137 +15,41 @@ export interface PrivateAlbumGalleryProps {
  onImageIndexChange: (index: number) => void;
 }

-interface ActivePointerGesture {
-  pointerId: number;
-  startX: number;
-  startTime: number;
-  startPosition: number;
-  viewportWidth: number;
-}
-
-type GallerySlideStyle = CSSProperties & {
-  "--gallery-slide-offset": string;
-  "--gallery-drag-offset": string;
-};
-
 export function PrivateAlbumGallery({
  album,
  imageIndex,
  onClose,
  onImageIndexChange,
 }: PrivateAlbumGalleryProps) {
-  const displayImages = useMemo(
-    () => getPrivateAlbumDisplayImages(album),
-    [album],
-  );
-  const [activeSourceIndex, setActiveSourceIndex] = useState(imageIndex);
-  const [dragOffset, setDragOffset] = useState(0);
-  const [isDragging, setIsDragging] = useState(false);
-  const gestureRef = useRef<ActivePointerGesture | null>(null);
-  const activePosition = displayImages.findIndex(
-    (image) => image.sourceIndex === activeSourceIndex,
-  );
-  const currentImage = displayImages[activePosition];
-  const hasPrevious = activePosition > 0;
-  const hasNext =
-    activePosition >= 0 && activePosition < displayImages.length - 1;
+  const touchStartXRef = useRef<number | null>(null);
+  const currentImage = album.images[imageIndex];
+  const hasPrevious = imageIndex > 0;
+  const hasNext = imageIndex < album.images.length - 1;

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") onClose();
      if (event.key === "ArrowLeft" && hasPrevious) {
-        const previousImage = displayImages[activePosition - 1];
-        if (previousImage) {
-          setActiveSourceIndex(previousImage.sourceIndex);
-          onImageIndexChange(previousImage.sourceIndex);
-        }
+        onImageIndexChange(imageIndex - 1);
      }
      if (event.key === "ArrowRight" && hasNext) {
-        const nextImage = displayImages[activePosition + 1];
-        if (nextImage) {
-          setActiveSourceIndex(nextImage.sourceIndex);
-          onImageIndexChange(nextImage.sourceIndex);
-        }
+        onImageIndexChange(imageIndex + 1);
      }
    };
    document.addEventListener("keydown", handleKeyDown);
    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [
-    activePosition,
-    displayImages,
-    hasNext,
-    hasPrevious,
-    onClose,
-    onImageIndexChange,
-  ]);
+  }, [hasNext, hasPrevious, imageIndex, onClose, onImageIndexChange]);

-  if (!currentImage) return null;
+  if (!currentImage?.url) return null;

-  const changeToPosition = (position: number) => {
-    const nextImage = displayImages[position];
-    if (!nextImage || position === activePosition) return;
-    setActiveSourceIndex(nextImage.sourceIndex);
-    setDragOffset(0);
-    setIsDragging(false);
-    onImageIndexChange(nextImage.sourceIndex);
-  };
-
-  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
-    if (event.button !== 0 || displayImages.length <= 1) return;
-    const viewportWidth = event.currentTarget.clientWidth || window.innerWidth;
-    gestureRef.current = {
-      pointerId: event.pointerId,
-      startX: event.clientX,
-      startTime: event.timeStamp,
-      startPosition: activePosition,
-      viewportWidth,
-    };
-    event.currentTarget.setPointerCapture(event.pointerId);
-    setDragOffset(0);
-    setIsDragging(true);
-  };
-
-  const handlePointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
-    const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
-    event.preventDefault();
-    const distance = event.clientX - gesture.startX;
-    setDragOffset(
-      getResistedGalleryDragDistance(
-        distance,
-        gesture.startPosition > 0,
-        gesture.startPosition < displayImages.length - 1,
-      ),
-    );
-  };
-
-  const finishPointerGesture = (
-    event: ReactPointerEvent<HTMLDivElement>,
-    cancelled: boolean,
-  ) => {
-    const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
-    gestureRef.current = null;
-    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
-      event.currentTarget.releasePointerCapture(event.pointerId);
-    }
-
-    const distance = event.clientX - gesture.startX;
-    const direction = cancelled
-      ? 0
-      : resolveGallerySwipeDirection({
-          distance,
-          durationMs: event.timeStamp - gesture.startTime,
-          viewportWidth: gesture.viewportWidth,
-          hasPrevious: gesture.startPosition > 0,
-          hasNext: gesture.startPosition < displayImages.length - 1,
-        });
-
-    setIsDragging(false);
-    setDragOffset(0);
-    if (direction !== 0) {
-      changeToPosition(gesture.startPosition + direction);
-    }
+  const handleTouchEnd = (event: React.TouchEvent) => {
+    const touchStartX = touchStartXRef.current;
+    touchStartXRef.current = null;
+    if (touchStartX === null) return;
+    const delta = event.changedTouches[0]?.clientX ?? touchStartX;
+    const distance = delta - touchStartX;
+    if (distance > 48 && hasPrevious) onImageIndexChange(imageIndex - 1);
+    if (distance < -48 && hasNext) onImageIndexChange(imageIndex + 1);
  };

  return (
@@ -166,6 +58,10 @@ export function PrivateAlbumGallery({
      role="dialog"
      aria-modal="true"
      aria-label={album.title || "Private album gallery"}
+      onTouchStart={(event) => {
+        touchStartXRef.current = event.touches[0]?.clientX ?? null;
+      }}
+      onTouchEnd={handleTouchEnd}
    >
      <button
        type="button"
@@ -176,54 +72,27 @@ export function PrivateAlbumGallery({
        <X size={24} aria-hidden="true" />
      </button>

-      <div
-        className={styles.galleryViewport}
-        data-testid="private-album-gallery-viewport"
-        data-dragging={isDragging ? "true" : "false"}
-        onPointerDown={handlePointerDown}
-        onPointerMove={handlePointerMove}
-        onPointerUp={(event) => finishPointerGesture(event, false)}
-        onPointerCancel={(event) => finishPointerGesture(event, true)}
-        onLostPointerCapture={(event) => finishPointerGesture(event, true)}
-      >
-        {displayImages.map((image, position) => {
-          if (Math.abs(position - activePosition) > 1) return null;
-          const slideStyle = {
-            "--gallery-slide-offset": `${(position - activePosition) * 100}%`,
-            "--gallery-drag-offset": `${dragOffset}px`,
-          } as GallerySlideStyle;
-
-          return (
-            <div
-              key={`${image.sourceIndex}:${image.url}`}
-              className={styles.gallerySlide}
-              style={slideStyle}
-              aria-hidden={position !== activePosition}
-            >
+      <div className={styles.galleryImageFrame}>
        <Image
-                src={image.url}
-                alt={`${album.title || "Private album"} photo ${position + 1}`}
+          src={currentImage.url}
+          alt={`${album.title || "Private album"} photo ${imageIndex + 1}`}
          fill
-                loading="eager"
-                fetchPriority={position === activePosition ? "high" : "auto"}
+          priority
          draggable={false}
          sizes="(max-width: 540px) 100vw, 540px"
          className={styles.galleryImage}
        />
      </div>
-          );
-        })}
-      </div>

-      <span className={styles.galleryCounter} aria-live="polite">
-        {activePosition + 1} / {displayImages.length}
+      <span className={styles.galleryCounter}>
+        {imageIndex + 1} / {album.images.length}
      </span>

      {hasPrevious ? (
        <button
          type="button"
          className={`${styles.galleryNav} ${styles.galleryPrevious}`}
-          onClick={() => changeToPosition(activePosition - 1)}
+          onClick={() => onImageIndexChange(imageIndex - 1)}
          aria-label="Previous photo"
        >
          <ChevronLeft size={30} aria-hidden="true" />
@@ -233,7 +102,7 @@ export function PrivateAlbumGallery({
        <button
          type="button"
          className={`${styles.galleryNav} ${styles.galleryNext}`}
-          onClick={() => changeToPosition(activePosition + 1)}
+          onClick={() => onImageIndexChange(imageIndex + 1)}
          aria-label="Next photo"
        >
          <ChevronRight size={30} aria-hidden="true" />
@@ -1,54 +0,0 @@
-export const GALLERY_DISTANCE_RATIO = 0.18;
-export const GALLERY_MIN_DISTANCE_PX = 56;
-export const GALLERY_FAST_SWIPE_MIN_DISTANCE_PX = 24;
-export const GALLERY_FAST_SWIPE_VELOCITY_PX_PER_MS = 0.45;
-export const GALLERY_EDGE_RESISTANCE = 0.28;
-
-export type GallerySwipeDirection = -1 | 0 | 1;
-
-export interface ResolveGallerySwipeInput {
-  distance: number;
-  durationMs: number;
-  viewportWidth: number;
-  hasPrevious: boolean;
-  hasNext: boolean;
-}
-
-export function getResistedGalleryDragDistance(
-  distance: number,
-  hasPrevious: boolean,
-  hasNext: boolean,
-): number {
-  if (distance > 0 && !hasPrevious) {
-    return distance * GALLERY_EDGE_RESISTANCE;
-  }
-  if (distance < 0 && !hasNext) {
-    return distance * GALLERY_EDGE_RESISTANCE;
-  }
-  return distance;
-}
-
-export function resolveGallerySwipeDirection({
-  distance,
-  durationMs,
-  viewportWidth,
-  hasPrevious,
-  hasNext,
-}: ResolveGallerySwipeInput): GallerySwipeDirection {
-  if (distance === 0) return 0;
-
-  const absoluteDistance = Math.abs(distance);
-  const distanceThreshold = Math.max(
-    GALLERY_MIN_DISTANCE_PX,
-    Math.max(0, viewportWidth) * GALLERY_DISTANCE_RATIO,
-  );
-  const velocity = absoluteDistance / Math.max(1, durationMs);
-  const passedDistanceThreshold = absoluteDistance >= distanceThreshold;
-  const passedVelocityThreshold =
-    absoluteDistance >= GALLERY_FAST_SWIPE_MIN_DISTANCE_PX &&
-    velocity >= GALLERY_FAST_SWIPE_VELOCITY_PX_PER_MS;
-
-  if (!passedDistanceThreshold && !passedVelocityThreshold) return 0;
-  if (distance > 0) return hasPrevious ? -1 : 0;
-  return hasNext ? 1 : 0;
-}
@@ -1,44 +0,0 @@
-import type { PrivateAlbum } from "@/data/schemas/private-room";
-
-export const PRIVATE_ALBUM_GRID_LIMIT = 9;
-
-export interface PrivateAlbumDisplayImage {
-  readonly sourceIndex: number;
-  readonly url: string;
-}
-
-export type PrivateAlbumGridLayout =
-  | "empty"
-  | "single"
-  | "double"
-  | "triple";
-
-export function getPrivateAlbumDisplayImages(
-  album: PrivateAlbum,
-): readonly PrivateAlbumDisplayImage[] {
-  return album.images.flatMap((image, sourceIndex) => {
-    const url = image.url.trim();
-    if (image.locked || url.length === 0) return [];
-    return [{ sourceIndex, url }];
-  });
-}
-
-export function findPrivateAlbumDisplayImage(
-  album: PrivateAlbum,
-  sourceIndex: number,
-): PrivateAlbumDisplayImage | null {
-  return (
-    getPrivateAlbumDisplayImages(album).find(
-      (image) => image.sourceIndex === sourceIndex,
-    ) ?? null
-  );
-}
-
-export function getPrivateAlbumGridLayout(
-  imageCount: number,
-): PrivateAlbumGridLayout {
-  if (imageCount <= 0) return "empty";
-  if (imageCount === 1) return "single";
-  if (imageCount === 2 || imageCount === 4) return "double";
-  return "triple";
-}
@@ -384,64 +384,47 @@
  font-weight: 760;
 }

-.mediaGrid {
-  display: grid;
-  gap: 4px;
-  margin-top: 14px;
-}
-
-.mediaGridSingle {
-  width: min(72%, 280px);
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.mediaGridDouble {
-  width: min(72%, 320px);
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.mediaGridTriple {
-  width: 100%;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.mediaGridItem {
+.mediaCover {
  position: relative;
  display: block;
  width: 100%;
-  aspect-ratio: 1;
+  margin-top: 14px;
  padding: 0;
  border: 0;
  overflow: hidden;
-  border-radius: 6px;
+  border-radius: clamp(20px, 5.185vw, 28px);
  background: #f3eef0;
  cursor: pointer;
  font: inherit;
-  transition: filter 0.16s ease, transform 0.16s ease;
+  text-align: inherit;
+  box-shadow: 0 14px 32px rgba(131, 72, 85, 0.14);
 }

-.mediaGridSingle .mediaGridItem {
+.momentCoverImage {
+  display: block;
+  width: 100%;
+  height: auto;
  aspect-ratio: 4 / 5;
-}
-
-.mediaGridImage {
  object-fit: cover;
-  user-select: none;
 }

-.mediaGridOverflow {
+.mediaCountBadge {
  position: absolute;
-  inset: 0;
-  z-index: 1;
-  display: flex;
+  top: 12px;
+  right: 12px;
+  display: inline-flex;
+  min-height: 30px;
  align-items: center;
-  justify-content: center;
-  background: rgba(24, 18, 21, 0.56);
+  gap: 6px;
+  padding: 0 11px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 999px;
+  background: rgba(28, 19, 23, 0.72);
  color: #ffffff;
-  font-size: clamp(22px, 6.296vw, 34px);
-  font-weight: 760;
-  letter-spacing: -0.02em;
-  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.34);
+  font-size: 12px;
+  font-weight: 800;
+  box-shadow: 0 8px 18px rgba(28, 19, 23, 0.18);
+  backdrop-filter: blur(12px);
 }

 .emptyMediaCover {
@@ -491,37 +474,12 @@
  overflow: hidden;
  background: #090909;
  color: #ffffff;
-  overscroll-behavior: contain;
-}
-
-.galleryViewport {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  cursor: grab;
  touch-action: pan-y;
-  user-select: none;
 }

-.galleryViewport[data-dragging="true"] {
-  cursor: grabbing;
-}
-
-.gallerySlide {
+.galleryImageFrame {
  position: absolute;
  inset: 0;
-  pointer-events: none;
-  transform: translate3d(
-    calc(var(--gallery-slide-offset, 0%) + var(--gallery-drag-offset, 0px)),
-    0,
-    0
-  );
-  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: transform;
-}
-
-.galleryViewport[data-dragging="true"] .gallerySlide {
-  transition: none;
 }

 .galleryImage {
@@ -672,7 +630,7 @@
  transform: translateY(-1px);
 }

-.mediaGridItem:hover {
+.mediaCover:hover {
  filter: brightness(1.02);
 }

@@ -686,7 +644,7 @@
  transform: translateY(1px) scale(0.99);
 }

-.mediaGridItem:active {
+.mediaCover:active {
  transform: scale(0.995);
 }

@@ -700,7 +658,7 @@

 .primaryCta:focus-visible,
 .lockedPreview:focus-visible,
-.mediaGridItem:focus-visible,
+.mediaCover:focus-visible,
 .galleryClose:focus-visible,
 .galleryNav:focus-visible,
 .dialogPrimary:focus-visible,
@@ -732,9 +690,3 @@
    transform: scale(1.01);
  }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .gallerySlide {
-    transition: none;
-  }
-}
@@ -36,7 +36,6 @@ import {
  buildPrivateRoomWithoutGalleryUrl,
  getPrivateAlbumGalleryState,
 } from "./private-album-gallery-url";
-import { findPrivateAlbumDisplayImage } from "./private-album-images";

 export function PrivateRoomScreen() {
  const router = useRouter();
@@ -88,23 +87,14 @@ export function PrivateRoomScreen() {
        : null,
    [galleryState, state.items],
  );
-  const galleryImage = useMemo(
-    () =>
-      galleryAlbum && galleryState
-        ? findPrivateAlbumDisplayImage(
-            galleryAlbum,
-            galleryState.imageIndex,
-          )
-        : null,
-    [galleryAlbum, galleryState],
-  );

  useEffect(() => {
    if (!galleryState || state.isLoading) return;
+    const image = galleryAlbum?.images[galleryState.imageIndex];
    if (
      !galleryAlbum ||
      isPrivateAlbumLocked(galleryAlbum) ||
-      !galleryImage
+      !image?.url
    ) {
      router.replace(
        buildPrivateRoomWithoutGalleryUrl(
@@ -117,7 +107,6 @@ export function PrivateRoomScreen() {
  }, [
    characterRoutes.privateRoom,
    galleryAlbum,
-    galleryImage,
    galleryState,
    router,
    searchParams,
@@ -139,14 +128,10 @@ export function PrivateRoomScreen() {
    });
  };

-  const handleOpenGallery = (albumId: string, imageIndex: number) => {
+  const handleOpenGallery = (albumId: string) => {
    openedGalleryInPageRef.current = true;
    router.push(
-      buildPrivateAlbumGalleryUrl(
-        albumId,
-        imageIndex,
-        characterRoutes.privateRoom,
-      ),
+      buildPrivateAlbumGalleryUrl(albumId, 0, characterRoutes.privateRoom),
      { scroll: false },
    );
  };
@@ -262,9 +247,7 @@ export function PrivateRoomScreen() {
                avatarUrl={avatarUrl}
                index={index}
                isUnlocking={state.unlockingAlbumId === album.albumId}
-                onOpenGallery={(imageIndex) =>
-                  handleOpenGallery(album.albumId, imageIndex)
-                }
+                onOpenGallery={() => handleOpenGallery(album.albumId)}
                onUnlock={() =>
                  dispatch({
                    type: "PrivateRoomUnlockRequested",
@@ -302,7 +285,7 @@ export function PrivateRoomScreen() {
        {galleryAlbum &&
        galleryState &&
        !isPrivateAlbumLocked(galleryAlbum) &&
-        galleryImage ? (
+        galleryAlbum.images[galleryState.imageIndex]?.url ? (
          <PrivateAlbumGallery
            album={galleryAlbum}
            imageIndex={galleryState.imageIndex}
@@ -4,7 +4,7 @@ import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";

-import { ProfileScreen } from "../profile-screen";
+import { SidebarScreen } from "../sidebar-screen";

 const mocks = vi.hoisted(() => ({
  openAuth: vi.fn(),
@@ -59,11 +59,11 @@ vi.mock("../use-pwa-install-entry", () => ({
    installApp: vi.fn(),
  }),
 }));
-vi.mock("../use-profile-user-bootstrap", () => ({
-  useProfileUserBootstrap: vi.fn(),
+vi.mock("../use-sidebar-user-bootstrap", () => ({
+  useSidebarUserBootstrap: vi.fn(),
 }));

-describe("ProfileScreen", () => {
+describe("SidebarScreen", () => {
  let container: HTMLDivElement;
  let root: Root;

@@ -83,12 +83,12 @@ describe("ProfileScreen", () => {

  it("renders without CharacterProvider and preserves the source character", () => {
    act(() => {
-      root.render(<ProfileScreen returnTo="/characters/maya/chat" />);
+      root.render(<SidebarScreen returnTo="/characters/maya/chat" />);
    });

    expect(
      container.querySelector<HTMLAnchorElement>(
-        '[data-analytics-key="profile.back_to_chat"]',
+        '[data-analytics-key="sidebar.back_to_chat"]',
      )?.getAttribute("href"),
    ).toBe("/characters/maya/chat");

@@ -107,7 +107,7 @@ describe("ProfileScreen", () => {
      expect.objectContaining({
        type: "topup",
        sourceCharacterSlug: "maya",
-        returnTo: "profile",
+        returnTo: "sidebar",
      }),
    );
  });
@@ -3,10 +3,10 @@ import { describe, expect, it } from "vitest";
 import type { UserView } from "@/stores/user/user-view";

 import {
-  getProfileViewModel,
-  getProfileWalletView,
-  normalizeProfileCount,
-} from "../profile-view-model";
+  getSidebarViewModel,
+  getSidebarWalletView,
+  normalizeSidebarCount,
+} from "../sidebar-view-model";

 const baseUser: UserView = {
  id: "user-1",
@@ -20,9 +20,9 @@ const baseUser: UserView = {
  isVip: false,
 };

-describe("getProfileViewModel", () => {
+describe("getSidebarViewModel", () => {
  it("derives guest state for logged-out users", () => {
-    const view = getProfileViewModel({
+    const view = getSidebarViewModel({
      loginStatus: "notLoggedIn",
      user: {
        currentUser: null,
@@ -37,7 +37,7 @@ describe("getProfileViewModel", () => {
  });

  it("derives member state and shows VIP activation for non-VIP users", () => {
-    const view = getProfileViewModel({
+    const view = getSidebarViewModel({
      loginStatus: "email",
      user: {
        currentUser: baseUser,
@@ -54,7 +54,7 @@ describe("getProfileViewModel", () => {
  });

  it("derives VIP state and hides VIP activation for VIP users", () => {
-    const view = getProfileViewModel({
+    const view = getSidebarViewModel({
      loginStatus: "email",
      user: {
        currentUser: { ...baseUser, isVip: true },
@@ -67,8 +67,8 @@ describe("getProfileViewModel", () => {
    expect(view.canActivateVip).toBe(false);
  });

-  it("keeps Guest users in the signed-out profile state", () => {
-    const view = getProfileViewModel({
+  it("uses fallback name and marks logged-in users without profile as initializing", () => {
+    const view = getSidebarViewModel({
      loginStatus: "guest",
      user: {
        currentUser: null,
@@ -77,15 +77,15 @@ describe("getProfileViewModel", () => {
      },
    });

-    expect(view.state).toBe("guest");
+    expect(view.state).toBe("member");
    expect(view.name).toBe("User name");
-    expect(view.isInitializingUser).toBe(false);
+    expect(view.isInitializingUser).toBe(true);
  });
 });

-describe("getProfileWalletView", () => {
+describe("getSidebarWalletView", () => {
  it("normalizes missing, negative, and fractional wallet values", () => {
-    const view = getProfileWalletView({
+    const view = getSidebarWalletView({
      currentUser: {
        ...baseUser,
        dailyFreeChatLimit: -1,
@@ -107,7 +107,7 @@ describe("getProfileWalletView", () => {
  });

  it("normalizes undefined and null counts to zero", () => {
-    expect(normalizeProfileCount(undefined)).toBe(0);
-    expect(normalizeProfileCount(null)).toBe(0);
+    expect(normalizeSidebarCount(undefined)).toBe(0);
+    expect(normalizeSidebarCount(null)).toBe(0);
  });
 });
@@ -3,7 +3,7 @@ import { describe, expect, it } from "vitest";

 import { UserHeader } from "../user-header";

-describe("profile Tailwind components", () => {
+describe("sidebar Tailwind components", () => {
  it("renders guest, member, and VIP header states", () => {
    const guestHtml = renderToStaticMarkup(
      <UserHeader
@@ -2,5 +2,5 @@
 * @file Automatically generated by barrelsby.
 */

-export * from "./profile-wallet-card";
+export * from "./sidebar-wallet-card";
 export * from "./user-header";
@@ -2,9 +2,9 @@

 import { FaCoins } from "react-icons/fa6";

-import styles from "./profile-wallet-card.module.css";
+import styles from "./sidebar-wallet-card.module.css";

-export interface ProfileWalletCardProps {
+export interface SidebarWalletCardProps {
  creditBalance: number;
  dailyFreeChatLimit: number;
  dailyFreeChatRemaining: number;
@@ -18,7 +18,7 @@ export interface ProfileWalletCardProps {
 const formatCoins = (value: number): string =>
  new Intl.NumberFormat("en-US").format(Math.max(0, Math.trunc(value)));

-export function ProfileWalletCard({
+export function SidebarWalletCard({
  creditBalance,
  dailyFreeChatLimit,
  dailyFreeChatRemaining,
@@ -27,7 +27,7 @@ export function ProfileWalletCard({
  onActivateVip,
  onTopUp,
  onRulesClick,
-}: ProfileWalletCardProps) {
+}: SidebarWalletCardProps) {
  return (
    <section className={styles.card} aria-label="My wallet">
      <div className={styles.leftColumn}>
@@ -45,7 +45,7 @@ export function ProfileWalletCard({

        <button
          type="button"
-          data-analytics-key="profile.coins_rules"
+          data-analytics-key="sidebar.coins_rules"
          data-analytics-label="Open coin usage rules"
          className={styles.rulesButton}
          onClick={onRulesClick}
@@ -58,7 +58,7 @@ export function ProfileWalletCard({
        {onActivateVip ? (
          <button
            type="button"
-            data-analytics-key="profile.activate_vip"
+            data-analytics-key="sidebar.activate_vip"
            data-analytics-label="Activate VIP"
            className={styles.activateButton}
            onClick={onActivateVip}
@@ -68,7 +68,7 @@ export function ProfileWalletCard({
        ) : null}
        <button
          type="button"
-          data-analytics-key="profile.topup"
+          data-analytics-key="sidebar.topup"
          data-analytics-label="Top up credits"
          className={styles.topUpButton}
          onClick={onTopUp}
@@ -3,11 +3,11 @@
 import Image from "next/image";

 import { UserMessageAvatar } from "@/app/_components";
-import type { ProfileUserState } from "@/app/profile/profile-view-model";
+import type { SidebarUserState } from "@/app/sidebar/sidebar-view-model";

 export interface UserHeaderProps {
  /** 派生状态：未登录 / 已登录未 VIP / 已登录且 VIP */
-  state: ProfileUserState;
+  state: SidebarUserState;
  /** 用户名（无 currentUser 时使用 fallback "User name"） */
  name: string;
  /** null → 默认头像 SVG */
@@ -36,8 +36,8 @@ export function UserHeader({
  if (isLoading) {
    return (
      <div className="flex w-full items-center gap-(--spacing-md,12px)" aria-hidden="true">
-        <div className="flex size-(--profile-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white" />
-        <div className="flex min-w-0 flex-auto flex-col gap-(--profile-card-gap-y,4px)">
+        <div className="flex size-(--sidebar-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white" />
+        <div className="flex min-w-0 flex-auto flex-col gap-(--sidebar-card-gap-y,4px)">
          <span className="block h-[clamp(16px,3.333vw,18px)] w-[60%] rounded-md bg-(--color-dark-gray,#e5e5e5)" />
          <span className="block h-[clamp(12px,2.593vw,14px)] w-[80%] rounded-md bg-(--color-dark-gray,#e5e5e5)" />
          <span className="block h-[clamp(12px,2.593vw,14px)] w-[40%] rounded-md bg-(--color-dark-gray,#e5e5e5)" />
@@ -50,11 +50,11 @@ export function UserHeader({
    <div className="flex w-full items-center gap-(--spacing-md,12px)">
      <UserMessageAvatar
        avatarUrl={avatarUrl}
-        className="flex size-(--profile-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white"
-        size="var(--profile-avatar-size, 56px)"
+        className="flex size-(--sidebar-avatar-size,56px) shrink-0 items-center justify-center overflow-hidden rounded-full bg-accent text-white"
+        size="var(--sidebar-avatar-size, 56px)"
      />

-      <div className="flex min-w-0 flex-auto flex-col gap-(--profile-card-gap-y,4px)">
+      <div className="flex min-w-0 flex-auto flex-col gap-(--sidebar-card-gap-y,4px)">
        <p className="m-0 overflow-hidden text-ellipsis whitespace-nowrap text-(length:--font-responsive-md,16px) font-semibold leading-[1.2] text-black">
          {name}
        </p>
@@ -66,7 +66,7 @@ export function UserHeader({
        {state === "vip" && (
          <span className="inline-flex self-start items-center gap-(--spacing-xs,4px) rounded-full bg-(--color-pill-bg,rgba(248,77,150,0.10)) px-[clamp(7px,1.667vw,9px)] py-[clamp(3px,0.741vw,4px)] text-(length:--font-size-xs,10px) font-semibold leading-none text-accent">
            <Image
-              src="/images/profile/ic_user_vip.png"
+              src="/images/sidebar/ic_user_vip.png"
              alt=""
              width={39}
              height={36}
@@ -80,7 +80,7 @@ export function UserHeader({
      {state === "guest" && (
        <button
          type="button"
-          data-analytics-key="profile.login"
+          data-analytics-key="sidebar.login"
          data-analytics-label="Open login"
          className="inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 bg-[linear-gradient(90deg,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))] px-(--spacing-lg,16px) py-[clamp(5px,1.111vw,6px)] text-(length:clamp(12px,2.593vw,14px)) font-semibold text-(--color-text-primary,#ffffff) hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
          onClick={onLoginClick}
@@ -1,12 +1,12 @@
 import type { RouteSearchParams } from "@/router/routes";

-import { ProfileScreen } from "./profile-screen";
+import { SidebarScreen } from "./sidebar-screen";

-export default async function ProfilePage({
+export default async function SidebarPage({
  searchParams,
 }: {
  searchParams: Promise<RouteSearchParams>;
 }) {
  const query = await searchParams;
-  return <ProfileScreen returnTo={query.returnTo} />;
+  return <SidebarScreen returnTo={query.returnTo} />;
 }
@@ -9,23 +9,22 @@ import {
  resolveGlobalRouteContext,
  type GlobalReturnToValue,
 } from "@/router/global-route-context";
-import { setPendingLogoutNavigation } from "@/router/logout-navigation";
 import { useGlobalAppNavigator } from "@/router/use-global-app-navigator";
 import { useAuthDispatch, useAuthState } from "@/stores/auth/auth-context";
 import { useUserDispatch, useUserState } from "@/stores/user/user-context";

-import { ProfileWalletCard, UserHeader } from "./components";
-import { getProfileViewModel } from "./profile-view-model";
+import { SidebarWalletCard, UserHeader } from "./components";
+import { getSidebarViewModel } from "./sidebar-view-model";
 import { usePwaInstallEntry } from "./use-pwa-install-entry";
-import { useProfileUserBootstrap } from "./use-profile-user-bootstrap";
+import { useSidebarUserBootstrap } from "./use-sidebar-user-bootstrap";

-import styles from "./components/profile-screen.module.css";
+import styles from "./components/sidebar-screen.module.css";

-export interface ProfileScreenProps {
+export interface SidebarScreenProps {
  returnTo?: GlobalReturnToValue;
 }

-export function ProfileScreen({ returnTo }: ProfileScreenProps) {
+export function SidebarScreen({ returnTo }: SidebarScreenProps) {
  const navigator = useGlobalAppNavigator();
  const navigation = resolveGlobalRouteContext(returnTo);
  const user = useUserState();
@@ -34,17 +33,16 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {
  const authDispatch = useAuthDispatch();
  const pwaInstallEntry = usePwaInstallEntry();

-  useProfileUserBootstrap({ auth, userDispatch });
+  useSidebarUserBootstrap({ auth, userDispatch });

  const handleLogoutClick = () => {
-    setPendingLogoutNavigation(navigation.splashUrl);
    userDispatch({ type: "UserClearLocal" });
    authDispatch({ type: "AuthLogoutSubmitted" });
    void signOut({ redirect: false });
    navigator.replace(navigation.splashUrl, { scroll: false });
  };

-  const view = getProfileViewModel({
+  const view = getSidebarViewModel({
    loginStatus: auth.loginStatus,
    user,
  });
@@ -59,7 +57,7 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {
          <BackButton
            href={navigation.chatUrl}
            variant="soft"
-            analyticsKey="profile.back_to_chat"
+            analyticsKey="sidebar.back_to_chat"
          />
        </div>

@@ -69,12 +67,12 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {
            name={view.name}
            avatarUrl={view.avatarUrl}
            isLoading={view.isInitializingUser}
-            onLoginClick={() => navigator.openAuth(navigation.profileUrl)}
+            onLoginClick={() => navigator.openAuth(navigation.sidebarUrl)}
          />
        </section>

        <section className={`${styles.cardSlot} ${styles.revealTwo}`}>
-          <ProfileWalletCard
+          <SidebarWalletCard
            creditBalance={view.wallet.creditBalance}
            dailyFreeChatLimit={view.wallet.dailyFreeChatLimit}
            dailyFreeChatRemaining={view.wallet.dailyFreeChatRemaining}
@@ -86,9 +84,9 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {
                    navigator.openSubscription({
                      type: "vip",
                      sourceCharacterSlug: navigation.characterSlug,
-                      returnTo: "profile",
+                      returnTo: "sidebar",
                      analytics: {
-                        entryPoint: "profile",
+                        entryPoint: "sidebar",
                        triggerReason: "vip_cta",
                      },
                    })
@@ -98,10 +96,10 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {
              navigator.openSubscription({
                type: "topup",
                sourceCharacterSlug: navigation.characterSlug,
-                returnTo: "profile",
+                returnTo: "sidebar",
                analytics: {
-                  entryPoint: "profile",
-                  triggerReason: "profile_recharge",
+                  entryPoint: "sidebar",
+                  triggerReason: "sidebar_recharge",
                },
              })
            }
@@ -115,7 +113,7 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {
            <div className={styles.settingsActions}>
              <button
                type="button"
-                data-analytics-key="profile.open_feedback"
+                data-analytics-key="sidebar.open_feedback"
                data-analytics-label="Open feedback"
                className={`${styles.logoutCard} ${styles.feedbackCard}`}
                onClick={() => navigator.push(navigation.feedbackUrl)}
@@ -157,7 +155,7 @@ export function ProfileScreen({ returnTo }: ProfileScreenProps) {

              <button
                type="button"
-                data-analytics-key="profile.logout"
+                data-analytics-key="sidebar.logout"
                data-analytics-label="Log out"
                className={styles.logoutCard}
                onClick={handleLogoutClick}
@@ -1,17 +1,17 @@
 import type { LoginStatus } from "@/data/schemas/auth";
 import type { UserView } from "@/stores/user/user-view";

-export type ProfileUserState = "guest" | "member" | "vip";
+export type SidebarUserState = "guest" | "member" | "vip";

-export const PROFILE_FALLBACK_USERNAME = "User name";
+export const SIDEBAR_FALLBACK_USERNAME = "User name";

-export interface ProfileUserInput {
+export interface SidebarUserInput {
  currentUser: UserView | null;
  avatarUrl: string | null;
  creditBalance?: number | null;
 }

-export interface ProfileWalletView {
+export interface SidebarWalletView {
  creditBalance: number;
  dailyFreeChatLimit: number;
  dailyFreeChatRemaining: number;
@@ -19,67 +19,65 @@ export interface ProfileWalletView {
  dailyFreePrivateRemaining: number;
 }

-export interface ProfileViewModel {
-  state: ProfileUserState;
+export interface SidebarViewModel {
+  state: SidebarUserState;
  name: string;
  avatarUrl: string | null;
  isInitializingUser: boolean;
-  wallet: ProfileWalletView;
+  wallet: SidebarWalletView;
  canActivateVip: boolean;
  canShowSettings: boolean;
 }

-export function getProfileViewModel({
+export function getSidebarViewModel({
  loginStatus,
  user,
 }: {
  loginStatus: LoginStatus;
-  user: ProfileUserInput;
-}): ProfileViewModel {
-  const state = getProfileUserState(loginStatus, user.currentUser);
+  user: SidebarUserInput;
+}): SidebarViewModel {
+  const state = getSidebarUserState(loginStatus, user.currentUser);

  return {
    state,
-    name: user.currentUser?.username ?? PROFILE_FALLBACK_USERNAME,
+    name: user.currentUser?.username ?? SIDEBAR_FALLBACK_USERNAME,
    avatarUrl: user.avatarUrl,
    isInitializingUser: state !== "guest" && user.currentUser == null,
-    wallet: getProfileWalletView(user),
+    wallet: getSidebarWalletView(user),
    canActivateVip: state !== "vip",
    canShowSettings: state !== "guest",
  };
 }

-export function getProfileUserState(
+export function getSidebarUserState(
  loginStatus: LoginStatus,
  currentUser: UserView | null,
-): ProfileUserState {
-  if (loginStatus === "notLoggedIn" || loginStatus === "guest") {
-    return "guest";
-  }
+): SidebarUserState {
+  if (loginStatus === "notLoggedIn") return "guest";
  return currentUser?.isVip === true ? "vip" : "member";
 }

-export function getProfileWalletView(
-  user: ProfileUserInput,
-): ProfileWalletView {
+export function getSidebarWalletView(
+  user: SidebarUserInput,
+): SidebarWalletView {
  const currentUser = user.currentUser;

  return {
-    creditBalance: normalizeProfileCount(user.creditBalance),
-    dailyFreeChatLimit: normalizeProfileCount(currentUser?.dailyFreeChatLimit),
-    dailyFreeChatRemaining: normalizeProfileCount(
+    creditBalance: normalizeSidebarCount(user.creditBalance),
+    dailyFreeChatLimit: normalizeSidebarCount(currentUser?.dailyFreeChatLimit),
+    dailyFreeChatRemaining: normalizeSidebarCount(
      currentUser?.dailyFreeChatRemaining,
    ),
-    dailyFreePrivateLimit: normalizeProfileCount(
+    dailyFreePrivateLimit: normalizeSidebarCount(
      currentUser?.dailyFreePrivateLimit,
    ),
-    dailyFreePrivateRemaining: normalizeProfileCount(
+    dailyFreePrivateRemaining: normalizeSidebarCount(
      currentUser?.dailyFreePrivateRemaining,
    ),
  };
 }

-export function normalizeProfileCount(value: number | null | undefined): number {
+export function normalizeSidebarCount(value: number | null | undefined): number {
  if (typeof value !== "number" || !Number.isFinite(value)) return 0;
  return Math.max(0, Math.trunc(value));
 }
@@ -4,17 +4,17 @@ import { type Dispatch, useEffect } from "react";

 import type { LoginStatus } from "@/data/schemas/auth";

-interface ProfileAuthBootstrapState {
+interface SidebarAuthBootstrapState {
  hasInitialized: boolean;
  isLoading: boolean;
  loginStatus: LoginStatus;
 }

-export function useProfileUserBootstrap({
+export function useSidebarUserBootstrap({
  auth,
  userDispatch,
 }: {
-  auth: ProfileAuthBootstrapState;
+  auth: SidebarAuthBootstrapState;
  userDispatch: Dispatch<{ type: "UserFetch" }>;
 }) {
  useEffect(() => {
@@ -22,7 +22,7 @@ describe("splash Tailwind components", () => {
    );

    expect(html).toContain("absolute");
-    expect(html).toContain("bg-splash-background");
+    expect(html).toContain("bg-sidebar-background");
    expect(html).toContain("object-cover");
    expect(html).toContain("%2Fimages%2Fcover%2Fmaya.png");
  });
@@ -16,7 +16,7 @@ export function SplashBackground({
  src: string;
 }) {
  return (
-    <div className="absolute inset-0 z-0 overflow-hidden bg-splash-background">
+    <div className="absolute inset-0 z-0 overflow-hidden bg-sidebar-background">
      <Image
        src={src}
        alt=""
@@ -31,10 +31,7 @@
  padding:
    calc(var(--page-padding-y, 20px) + var(--app-safe-top, 0px))
    calc(var(--page-padding-x, 26px) + var(--app-safe-right, 0px))
-    calc(
-      var(--spacing-md, 12px) + var(--app-safe-bottom, 0px) +
-        var(--app-bottom-nav-height, 64px)
-    )
+    calc(var(--page-padding-y, 20px) + var(--app-safe-bottom, 0px))
    calc(var(--page-padding-x, 26px) + var(--app-safe-left, 0px));
 }

@@ -2,29 +2,31 @@

 import { useEffect } from "react";

-import { AppBottomNav, MobileShell } from "@/app/_components/core";
+import { MobileShell } from "@/app/_components/core";
+// import { AppBottomNav } from "@/app/_components/core";
 import { useAppNavigator } from "@/router/use-app-navigator";
 import {
  useActiveCharacter,
  useActiveCharacterRoutes,
 } from "@/providers/character-provider";
-import { useAuthState } from "@/stores/auth/auth-context";
+// import { useAuthState } from "@/stores/auth/auth-context";
 import { pwaUtil } from "@/utils/pwa";

 import {
  SplashBackground,
  SplashButton,
  SplashContent,
-  SplashLatestMessage,
+  // SplashLatestMessage,
  SplashLogo,
 } from "./components";
-import { useSplashLatestMessage } from "./hooks/use-splash-latest-message";
+// import { useSplashLatestMessage } from "./hooks/use-splash-latest-message";
 import styles from "./components/splash-screen.module.css";

 export function SplashScreen() {
  const navigator = useAppNavigator();
  const character = useActiveCharacter();
  const characterRoutes = useActiveCharacterRoutes();
+  /*
  const authState = useAuthState();
  const latestMessage = useSplashLatestMessage({
    characterId: character.id,
@@ -32,14 +34,17 @@ export function SplashScreen() {
    isAuthLoading: authState.isLoading,
    loginStatus: authState.loginStatus,
  });
+  */

  const handleStartChat = () => {
    navigator.openChat({ replace: true });
  };

+  /*
  const handleOpenPrivateRoom = () => {
    navigator.push(characterRoutes.privateRoom, { scroll: false });
  };
+  */

  const handleOpenSplash = () => {
    navigator.push(characterRoutes.splash, { scroll: false });
@@ -50,7 +55,7 @@ export function SplashScreen() {
  }, []);

  return (
-    <MobileShell background="var(--color-splash-background)">
+    <MobileShell background="var(--color-sidebar-background)">
      <div className={styles.wrapper}>
        <SplashBackground src={character.assets.cover} />
        {/* 渐变叠加层：accent → transparent (bottom-left → center-right) */}
@@ -58,6 +63,7 @@ export function SplashScreen() {
        <div className={styles.content}>
          <SplashLogo />
          <div className={styles.spacer} />
+          {/*
          <SplashLatestMessage
            message={latestMessage.message}
            characterName={character.shortName}
@@ -65,6 +71,7 @@ export function SplashScreen() {
            isLoading={latestMessage.isLoading}
            onOpenChat={handleStartChat}
          />
+          */}
          <SplashContent characterName={character.shortName} />
          <div className={styles.buttonArea}>
            <SplashButton onStartChat={handleStartChat} />
@@ -75,12 +82,14 @@ export function SplashScreen() {
            24/7 online | Chat | Companion | Heal | Sweet moments
          </p>
        </div>
+        {/*
        <AppBottomNav
          activeItem="chat"
          privateRoomLabel={character.copy.privateRoomTitle}
          onChatClick={handleOpenSplash}
          onPrivateRoomClick={handleOpenPrivateRoom}
        />
+        */}
      </div>
    </MobileShell>
  );
@@ -19,7 +19,7 @@ describe("SubscriptionPage", () => {
    const page = await SubscriptionPage({
      searchParams: Promise.resolve({
        character: "maya",
-        returnTo: "profile",
+        returnTo: "sidebar",
        type: "topup",
      }),
    });
@@ -27,7 +27,7 @@ describe("SubscriptionPage", () => {
    expect(renderToStaticMarkup(page)).toContain("Global subscription");
    expect(mocks.screenProps).toHaveBeenCalledWith(
      expect.objectContaining({
-        returnTo: "profile",
+        returnTo: "sidebar",
        sourceCharacterSlug: "maya",
        subscriptionType: "topup",
      }),
@@ -14,7 +14,7 @@ const PendingPaymentOrderSchema = z
    subscriptionType: z.enum(["vip", "topup", "tip"]),
    giftCategory: z.string().min(1).nullable().default(null),
    giftPlanId: z.string().min(1).nullable().default(null),
-    returnTo: z.enum(["chat", "private-room", "profile"]).optional(),
+    returnTo: z.enum(["chat", "private-room", "sidebar"]).optional(),
    characterSlug: z.string().regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/).optional(),
    createdAt: z.number(),
  })
@@ -30,10 +30,10 @@ describe("payment analytics context", () => {

    expect(
      parsePaymentAnalyticsContext({
-        entryPoint: "profile",
+        entryPoint: "sidebar",
        triggerReason: null,
        subscriptionType: "vip",
      }),
-    ).toEqual({ entryPoint: "profile", triggerReason: "vip_cta" });
+    ).toEqual({ entryPoint: "sidebar", triggerReason: "vip_cta" });
  });
 });
@@ -5,7 +5,7 @@ export type PaymentAnalyticsTriggerReason =
  | "daily_chat_limit"
  | "private_topic_limit"
  | "insufficient_credits"
-  | "profile_recharge"
+  | "sidebar_recharge"
  | "vip_cta"
  | "ad_landing"
  | "manual_recharge"
@@ -16,7 +16,7 @@ export type PaymentAnalyticsEntryPoint =
  | "chat_unlock"
  | "private_album_unlock"
  | "private_room"
-  | "profile"
+  | "sidebar"
  | "chat_offer_banner"
  | "subscription_direct"
  | "tip_page"
@@ -33,7 +33,7 @@ const ENTRY_POINTS = new Set<PaymentAnalyticsEntryPoint>([
  "chat_unlock",
  "private_album_unlock",
  "private_room",
-  "profile",
+  "sidebar",
  "chat_offer_banner",
  "subscription_direct",
  "tip_page",
@@ -45,7 +45,7 @@ const TRIGGER_REASONS = new Set<PaymentAnalyticsTriggerReason>([
  "daily_chat_limit",
  "private_topic_limit",
  "insufficient_credits",
-  "profile_recharge",
+  "sidebar_recharge",
  "vip_cta",
  "ad_landing",
  "manual_recharge",
@@ -29,7 +29,7 @@ describe("external entry navigation", () => {
      ROUTES.chat,
    );
    expect(resolveExternalEntryTarget({ target: "/tip" })).toBe(ROUTES.chat);
-    expect(resolveExternalEntryTarget({ target: "profile" })).toBe(ROUTES.chat);
+    expect(resolveExternalEntryTarget({ target: "sidebar" })).toBe(ROUTES.chat);
  });

  it("routes every tip entry to the tier selection page", () => {
@@ -60,30 +60,30 @@ describe("subscription exit helpers", () => {
    );
  });

-  it("falls back to profile by default", async () => {
+  it("falls back to sidebar by default", async () => {
    consumePendingChatImageReturnMock.mockResolvedValue(null);
    peekPendingChatUnlockMock.mockResolvedValue(null);

-    expect(getSubscriptionFallbackExitUrl(null)).toBe(ROUTES.profile);
+    expect(getSubscriptionFallbackExitUrl(null)).toBe(ROUTES.sidebar);
    await expect(consumeSubscriptionExitUrl(null)).resolves.toBe(
-      ROUTES.profile,
+      ROUTES.sidebar,
    );
  });

-  it("returns to global profile with the source character", async () => {
+  it("returns to global sidebar with the source character", async () => {
    const expectedUrl = buildGlobalPageUrl(
-      ROUTES.profile,
+      ROUTES.sidebar,
      getCharacterRoutes("maya").chat,
    );

-    expect(getSubscriptionFallbackExitUrl("profile", "maya")).toBe(
+    expect(getSubscriptionFallbackExitUrl("sidebar", "maya")).toBe(
      expectedUrl,
    );
    await expect(
-      consumeSubscriptionExitUrl("profile", "maya"),
+      consumeSubscriptionExitUrl("sidebar", "maya"),
    ).resolves.toBe(expectedUrl);
    await expect(
-      resolveSubscriptionSuccessExitUrl("profile", "maya"),
+      resolveSubscriptionSuccessExitUrl("sidebar", "maya"),
    ).resolves.toBe(expectedUrl);
    expect(consumePendingChatImageReturnMock).not.toHaveBeenCalled();
    expect(peekPendingChatUnlockMock).not.toHaveBeenCalled();
@@ -48,10 +48,10 @@ export function getSubscriptionFallbackExitUrl(
  const routes = getCharacterRoutes(characterSlug);
  if (returnTo === "chat") return routes.chat;
  if (returnTo === "private-room") return routes.privateRoom;
-  if (returnTo === "profile") {
-    return buildGlobalPageUrl(ROUTES.profile, routes.chat);
+  if (returnTo === "sidebar") {
+    return buildGlobalPageUrl(ROUTES.sidebar, routes.chat);
  }
-  return ROUTES.profile;
+  return ROUTES.sidebar;
 }

 export async function consumeSubscriptionExitUrl(
@@ -61,7 +61,7 @@ export async function consumeSubscriptionExitUrl(
  if (returnTo === "private-room") {
    return getCharacterRoutes(characterSlug).privateRoom;
  }
-  if (returnTo === "profile") {
+  if (returnTo === "sidebar") {
    return getSubscriptionFallbackExitUrl(returnTo, characterSlug);
  }

@@ -78,7 +78,7 @@ export async function resolveSubscriptionSuccessExitUrl(
  if (returnTo === "private-room") {
    return getCharacterRoutes(characterSlug).privateRoom;
  }
-  if (returnTo === "profile") {
+  if (returnTo === "sidebar") {
    return getSubscriptionFallbackExitUrl(returnTo, characterSlug);
  }

@@ -40,7 +40,7 @@ describe("payment search params", () => {
  it("accepts only supported subscription return targets", () => {
    expect(parseSubscriptionReturnTo("chat")).toBe("chat");
    expect(parseSubscriptionReturnTo("private-room")).toBe("private-room");
-    expect(parseSubscriptionReturnTo("profile")).toBe("profile");
+    expect(parseSubscriptionReturnTo("sidebar")).toBe("sidebar");
    expect(parseSubscriptionReturnTo(["private-room", "chat"])).toBe(
      "private-room",
    );
@@ -54,12 +54,12 @@ describe("pending payment order helpers", () => {
    await clearPendingPaymentOrder();
  });

-  it("stores and rebuilds global profile returns", async () => {
+  it("stores and rebuilds global sidebar returns", async () => {
    await clearPendingPaymentOrder();

    const saveResult = await savePendingEzpayOrder({
-      orderId: "order-profile",
-      returnTo: "profile",
+      orderId: "order-sidebar",
+      returnTo: "sidebar",
      subscriptionType: "topup",
      characterSlug: "maya",
      createdAt: 1,
@@ -70,20 +70,20 @@ describe("pending payment order helpers", () => {
    expect(storedResult).toMatchObject({
      success: true,
      data: {
-        orderId: "order-profile",
-        returnTo: "profile",
+        orderId: "order-sidebar",
+        returnTo: "sidebar",
        characterSlug: "maya",
      },
    });
    expect(
      buildPendingPaymentSubscriptionUrl({
        payChannel: "ezpay",
-        returnTo: "profile",
+        returnTo: "sidebar",
        subscriptionType: "topup",
        characterSlug: "maya",
      }),
    ).toBe(
-      "/subscription?type=topup&payChannel=ezpay&paymentReturn=1&returnTo=profile&character=maya",
+      "/subscription?type=topup&payChannel=ezpay&paymentReturn=1&returnTo=sidebar&character=maya",
    );
    await clearPendingPaymentOrder();
  });
@@ -29,7 +29,7 @@ export function parseSubscriptionReturnTo(
  if (
    returnTo === "chat" ||
    returnTo === "private-room" ||
-    returnTo === "profile"
+    returnTo === "sidebar"
  ) {
    return returnTo;
  }
@@ -16,8 +16,8 @@ describe("global route context", () => {
      chatUrl: "/characters/maya/chat",
      splashUrl: "/characters/maya/splash",
    });
-    expect(context.profileUrl).toBe(
-      "/profile?returnTo=%2Fcharacters%2Fmaya%2Fchat",
+    expect(context.sidebarUrl).toBe(
+      "/sidebar?returnTo=%2Fcharacters%2Fmaya%2Fchat",
    );
    expect(context.feedbackUrl).toBe(
      "/feedback?returnTo=%2Fcharacters%2Fmaya%2Fchat",
@@ -52,8 +52,8 @@ describe("global route context", () => {
  });

  it("sanitizes return targets when building a global page url", () => {
-    expect(buildGlobalPageUrl(ROUTES.profile, "https://example.com")).toBe(
-      "/profile?returnTo=%2Fcharacters%2Felio%2Fchat",
+    expect(buildGlobalPageUrl(ROUTES.sidebar, "https://example.com")).toBe(
+      "/sidebar?returnTo=%2Fcharacters%2Felio%2Fchat",
    );
  });
 });
@@ -5,6 +5,11 @@ import { LEGACY_GLOBAL_ROUTE_REDIRECTS } from "../legacy-global-route-redirects"
 describe("legacy global route redirects", () => {
  it("redirects character-scoped global pages without permanent caching", () => {
    expect(LEGACY_GLOBAL_ROUTE_REDIRECTS).toEqual([
+      {
+        source: "/characters/:characterSlug/sidebar",
+        destination: "/sidebar?returnTo=/characters/:characterSlug/chat",
+        permanent: false,
+      },
      {
        source: "/characters/:characterSlug/feedback",
        destination: "/feedback?returnTo=/characters/:characterSlug/chat",
@@ -1,26 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import {
-  consumePendingLogoutNavigation,
-  setPendingLogoutNavigation,
-} from "../logout-navigation";
-
-describe("logout navigation", () => {
-  it("consumes the pending destination only once", () => {
-    setPendingLogoutNavigation("/characters/maya/splash");
-
-    expect(consumePendingLogoutNavigation()).toBe(
-      "/characters/maya/splash",
-    );
-    expect(consumePendingLogoutNavigation()).toBeNull();
-  });
-
-  it("keeps only the latest pending destination", () => {
-    setPendingLogoutNavigation("/characters/elio/splash");
-    setPendingLogoutNavigation("/characters/nayeli/splash");
-
-    expect(consumePendingLogoutNavigation()).toBe(
-      "/characters/nayeli/splash",
-    );
-  });
-});
@@ -75,22 +75,14 @@ describe("navigation resolver", () => {
    ).toBeNull();
  });

-  it.each(["notLoggedIn", "guest"] as const)(
-    "redirects %s users from profile to auth with the return context",
-    (loginStatus) => {
+  it("redirects not logged in session routes except chat to splash", () => {
    expect(
      resolveRouteGuardRedirect({
-          loginStatus,
-          pathname: ROUTES.profile,
-          searchParams: "returnTo=%2Fcharacters%2Fmaya%2Fchat",
+        loginStatus: "notLoggedIn",
+        pathname: ROUTES.sidebar,
      }),
-      ).toBe(
-        ROUTE_BUILDERS.authWithRedirect(
-          "/profile?returnTo=%2Fcharacters%2Fmaya%2Fchat",
-        ),
-      );
-    },
-  );
+    ).toBe(ROUTES.splash);
+  });

  it("redirects non-real users on subscription routes to auth", () => {
    expect(
@@ -11,7 +11,7 @@ describe("route meta", () => {
    expect(getRouteAccess(ROUTES.privateRoom)).toBe("guestEntry");
    expect(getRouteAccess(ROUTES.tip)).toBe("public");
    expect(getRouteAccess(ROUTES.externalEntry)).toBe("public");
-    expect(getRouteAccess(ROUTES.profile)).toBe("realUser");
+    expect(getRouteAccess(ROUTES.sidebar)).toBe("session");
    expect(getRouteAccess(ROUTES.feedback)).toBe("session");
    expect(getRouteAccess(ROUTES.subscription)).toBe("realUser");
    expect(getRouteAccess(ROUTES.coinsRules)).toBe("public");
@@ -36,7 +36,7 @@ describe("route meta", () => {
  });

  it("does not classify removed character-scoped global pages", () => {
-    expect(getRouteAccess("/characters/maya/profile")).toBe("public");
+    expect(getRouteAccess("/characters/maya/sidebar")).toBe("public");
    expect(getRouteAccess("/characters/maya/feedback")).toBe("public");
    expect(getRouteAccess("/characters/maya/coins-rules")).toBe("public");
  });
@@ -9,7 +9,6 @@ import {
  useAuthSelector,
 } from "@/stores/auth/auth-context";

-import { consumePendingLogoutNavigation } from "./logout-navigation";
 import { resolveRouteGuardRedirect } from "./navigation-resolver";

 export function AppNavigationGuard() {
@@ -27,12 +26,6 @@ export function AppNavigationGuard() {
  useEffect(() => {
    if (!authState.hasInitialized || authState.isLoading) return;

-    const logoutRedirect = consumePendingLogoutNavigation();
-    if (logoutRedirect) {
-      router.replace(logoutRedirect);
-      return;
-    }
-
    const redirectTo = resolveRouteGuardRedirect({
      loginStatus: authState.loginStatus,
      pathname,
@@ -9,7 +9,7 @@ import { getCharacterRoutes, ROUTES } from "./routes";
 export const GLOBAL_RETURN_TO_PARAM = "returnTo";

 export type GlobalPageRoute =
-  | typeof ROUTES.profile
+  | typeof ROUTES.sidebar
  | typeof ROUTES.feedback
  | typeof ROUTES.coinsRules;

@@ -17,7 +17,7 @@ export interface GlobalRouteContext {
  readonly characterSlug: CharacterProfile["slug"];
  readonly chatUrl: string;
  readonly splashUrl: string;
-  readonly profileUrl: string;
+  readonly sidebarUrl: string;
  readonly feedbackUrl: string;
  readonly coinsRulesUrl: string;
 }
@@ -39,7 +39,7 @@ export function resolveGlobalRouteContext(
    characterSlug: character.slug,
    chatUrl,
    splashUrl: characterRoutes.splash,
-    profileUrl: buildGlobalPageUrl(ROUTES.profile, chatUrl),
+    sidebarUrl: buildGlobalPageUrl(ROUTES.sidebar, chatUrl),
    feedbackUrl: buildGlobalPageUrl(ROUTES.feedback, chatUrl),
    coinsRulesUrl: buildGlobalPageUrl(ROUTES.coinsRules, chatUrl),
  });
@@ -6,6 +6,11 @@ export interface LegacyGlobalRouteRedirect {

 export const LEGACY_GLOBAL_ROUTE_REDIRECTS: readonly LegacyGlobalRouteRedirect[] =
  Object.freeze([
+    {
+      source: "/characters/:characterSlug/sidebar",
+      destination: "/sidebar?returnTo=/characters/:characterSlug/chat",
+      permanent: false,
+    },
    {
      source: "/characters/:characterSlug/feedback",
      destination: "/feedback?returnTo=/characters/:characterSlug/chat",
@@ -1,11 +0,0 @@
-let pendingLogoutUrl: string | null = null;
-
-export function setPendingLogoutNavigation(url: string): void {
-  pendingLogoutUrl = url;
-}
-
-export function consumePendingLogoutNavigation(): string | null {
-  const url = pendingLogoutUrl;
-  pendingLogoutUrl = null;
-  return url;
-}
@@ -10,7 +10,7 @@ export type AppSubscriptionType = "vip" | "topup";
 export type AppSubscriptionReturnTo =
  | "chat"
  | "private-room"
-  | "profile"
+  | "sidebar"
  | null;

 export interface OpenSubscriptionInput {
@@ -15,7 +15,7 @@ const GLOBAL_ROUTE_ACCESS: Partial<Record<string, RouteAccess>> = {
  [ROUTES.privateRoom]: "guestEntry",
  [ROUTES.tip]: "public",
  [ROUTES.externalEntry]: "public",
-  [ROUTES.profile]: "realUser",
+  [ROUTES.sidebar]: "session",
  [ROUTES.feedback]: "session",
  [ROUTES.subscription]: "realUser",
  [ROUTES.coinsRules]: "public",
@@ -25,7 +25,7 @@ export const ROUTES = {
  tip: "/tip",
  externalEntry: "/external-entry",
  auth: "/auth",
-  profile: "/profile",
+  sidebar: "/sidebar",
  feedback: "/feedback",
  subscription: "/subscription",
  coinsRules: "/coins-rules",
@@ -114,7 +114,7 @@ export const ALL_STATIC_ROUTES: readonly StaticRoute[] = [
  ROUTES.tip,
  ROUTES.externalEntry,
  ROUTES.auth,
-  ROUTES.profile,
+  ROUTES.sidebar,
  ROUTES.feedback,
  ROUTES.coinsRules,
 ] as const;
@@ -31,8 +31,8 @@
  --color-page-background: #ffffff;

  /* ==================== 扩展令牌（迁移自 Flutter UI） ==================== */
-  /* Splash 深色背景 */
-  --color-splash-background: #0d0b14;
+  /* 侧边栏/Profile 深色背景 */
+  --color-sidebar-background: #0d0b14;
  --color-dark-background: #0d0b14;
  --color-dark-gray: #2a2a2a;
  --color-bubble-background: #1a1625;
@@ -91,7 +91,7 @@
  --color-chevron-icon: #000000;
  --color-destructive: #ff6b6b;

-  /* ==================== Profile（浅色主题） ==================== */
+  /* ==================== Sidebar（浅色主题） ==================== */
  /* 卡片纯白表面 */
  --color-card-surface: #ffffff;

@@ -54,14 +54,14 @@
  --chat-avatar-size: clamp(38px, 7.963vw, 43px);
  --chat-send-button-size: clamp(40px, 8.148vw, 44px);

-  /* Profile 专用响应式尺寸 */
-  --profile-user-padding-y: clamp(18px, 3.704vw, 20px);
-  --profile-card-gap-y: clamp(6px, 1.481vw, 8px);
-  --profile-card-padding-x: clamp(18px, 5.185vw, 28px);
-  --profile-card-padding-y: clamp(16px, 3.333vw, 18px);
-  --profile-card-padding-right: clamp(10px, 2.222vw, 12px);
-  --profile-avatar-size: clamp(48px, 10.37vw, 56px);
-  --profile-voice-image-size: clamp(84px, 18.519vw, 100px);
+  /* Sidebar 专用响应式尺寸 */
+  --sidebar-user-padding-y: clamp(18px, 3.704vw, 20px);
+  --sidebar-card-gap-y: clamp(6px, 1.481vw, 8px);
+  --sidebar-card-padding-x: clamp(18px, 5.185vw, 28px);
+  --sidebar-card-padding-y: clamp(16px, 3.333vw, 18px);
+  --sidebar-card-padding-right: clamp(10px, 2.222vw, 12px);
+  --sidebar-avatar-size: clamp(48px, 10.37vw, 56px);
+  --sidebar-voice-image-size: clamp(84px, 18.519vw, 100px);

  /* 响应式字体：按 540px 设计宽度换算，并给小屏设置可读下限。 */
  --font-responsive-md: clamp(14px, 2.963vw, 16px);
Author	SHA1	Message	Date
admin	68f9ad6fe6	fix(splash): hide experimental splash components Docker Image / Quality and Bundle Budgets (push) Failing after 2m17s Details Docker Image / Build and Push Docker Image (push) Has been skipped Details	2026-07-21 16:16:41 +08:00
admin	fe0d767048	chore(icons): 使用生产环境的图标	2026-07-21 16:16:41 +08:00