Jyotisha/frontend/src/app/not-found.tsx

// These pages sit in the shared root layout segment and must not import the
// site stylesheet — that would drag the chat styles onto every admin route — so
// they cannot read a single design token. They restate the handful they need,
// in both themes, and those values are kept in step with the palette by hand.
import { cloneElement, type CSSProperties, type ReactElement } from "react";
import Link from "next/link";

const canvas = "var(--bp-canvas)";
const ink = "var(--bp-ink)";
const inkSecondary = "var(--bp-ink-soft)";
const border = "var(--bp-border)";
const focus = "var(--bp-action)";

const actionStyle = {
  alignItems: "center",
  background: canvas,
  border: `1px solid ${border}`,
  borderRadius: "12px",
  color: ink,
  display: "inline-flex",
  fontSize: "14px",
  fontWeight: 500,
  justifyContent: "center",
  minHeight: "44px",
  minWidth: "88px",
  padding: "0 20px",
  textDecoration: "none",
} as const satisfies CSSProperties;

function HomeAction({
  children,
  className,
  render,
  style,
}: {
  children: string;
  className: string;
  render: ReactElement<{ className?: string; href: string; style?: CSSProperties }>;
  style: CSSProperties;
}) {
  return cloneElement(render, { className, style }, children);
}

export default function RootNotFound() {
  return (
    <main
      style={{
        alignItems: "center",
        background: canvas,
        color: ink,
        display: "flex",
        flexDirection: "column",
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif',
        gap: "16px",
        justifyContent: "center",
        minHeight: "100vh",
        padding: "48px 24px",
        textAlign: "center",
      }}
    >
      <style>{`
        :root {
          color-scheme: light;
          --bp-canvas: #fbfaf7;
          --bp-ink: #1d1d1f;
          --bp-ink-soft: #5f5f59;
          --bp-border: #d8d6cf;
          --bp-action: #85432f;
          --bp-danger: #9a2f2f;
        }
        @media (prefers-color-scheme: dark) {
          :root:not([data-theme="light"]) {
            color-scheme: dark;
            --bp-canvas: #262624;
            --bp-ink: #f2f0ea;
            --bp-ink-soft: #b3afa4;
            --bp-border: #3c3b37;
            --bp-action: #d78064;
            --bp-danger: #e08573;
          }
        }
        :root[data-theme="dark"] {
          color-scheme: dark;
          --bp-canvas: #262624;
          --bp-ink: #f2f0ea;
          --bp-ink-soft: #b3afa4;
          --bp-border: #3c3b37;
          --bp-action: #d78064;
          --bp-danger: #e08573;
        }
        .root-not-found-action:focus-visible { outline: 3px solid ${focus}; outline-offset: 2px; }
      `}</style>
      <p style={{ color: inkSecondary, fontSize: "14px", fontWeight: 500, letterSpacing: "0.12em", margin: 0 }}>
        404
      </p>
      <h1 style={{ color: ink, fontSize: "20px", fontWeight: 600, margin: 0 }}>页面不存在</h1>
      <p style={{ color: inkSecondary, fontSize: "14px", lineHeight: 1.7, margin: 0, maxWidth: "28rem" }}>
        该地址不存在、已下线，或在当前域名下不可用。可以返回对话首页继续。
      </p>
      <div style={{ marginTop: "8px" }}>
        <HomeAction
          className="root-not-found-action"
          render={<Link href="/" />}
          style={actionStyle}
        >
          返回对话
        </HomeAction>
      </div>
    </main>
  );
}