:root {
  --bg: #f6f5f1;
  --card: #ffffff;
  --ink: #222222;
  --soft: #6b6b6b;
  --line: #e3e1da;
  --accent: #c26a1b;
  --user: #fbe9d7;
  --error: #b3412b;
  color-scheme: light dark;
  --font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", sans-serif;
  /* perplexity.ai's stack with Inter in place of their own font: Chinese comes from system-ui (PingFang on Apple) */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: "Space Mono", var(--font-cjk), ui-monospace, monospace;
  --app-h: 100dvh;  /* the full screen height: follows Safari's toolbars */
}
/* Home screen app: iOS 27 reports the viewport short by the status bar (screen 874, innerHeight / 100dvh / fixed
   bottom 812 on a 402x874 iPhone, measured 2026-10-17) while the web view fills the screen, which left a 62px band at
   the bottom. There are no toolbars here, so the large viewport is the screen; fixed overlays hang from the top. */
@media (display-mode: standalone) {
  :root { --app-h: 100lvh; }
  :root #settings, :root #player, :root #viewer { bottom: auto; height: var(--app-h); }  /* :root: beats their inset: 0 below */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17191a;
    --card: #222527;
    --ink: #ebe9e4;
    --soft: #9a9d9f;
    --line: #33373a;
    --accent: #e09450;
    --user: #3b2f24;
    --error: #e07a62;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font: 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;  /* light text on dark: subpixel smoothing makes it look bold on a Mac */
  -moz-osx-font-smoothing: grayscale;
  background: #0a0a0b;  /* no light flash while both sections are still hidden */
  color: var(--ink);
}
/* Base controls, now only for the login page; the chat page and settings style their own (bottom of the file). */
:where(#login) :where(button, input) {
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}
:where(#login) button { padding: 8px 12px; cursor: pointer; }
:where(#login) button:disabled { opacity: 0.5; cursor: default; }
:where(#login) :where(button[type="submit"], button.primary) { background: var(--accent); border-color: var(--accent); color: #fff; }
:where(#login) input { padding: 10px 12px; min-width: 0; }
.small { font-size: 13px; color: var(--soft); margin: 0; }
.error { color: var(--error); margin: 0; }

/* Fonts, self-hosted (Latin only; Chinese falls back to the system font): Inter for text, Space Mono for code and labels */
@font-face { font-family: "Inter"; src: url("inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("space-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("space-mono-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* Chinese: the system's PingFang (nothing downloaded; other systems fall through to the next font). Every weight
   Inter may ask for maps to a real PingFang face, so Chinese is never faux-bolded (same as perplexity.ai). */
@font-face { font-family: "PingFang SC"; font-weight: 100; src: local("PingFangSC-Thin"); }
@font-face { font-family: "PingFang SC"; font-weight: 200; src: local("PingFangSC-Ultralight"); }
@font-face { font-family: "PingFang SC"; font-weight: 300; src: local("PingFangSC-Light"); }
@font-face { font-family: "PingFang SC"; font-weight: 350; src: local("PingFangSC-Regular"); }
@font-face { font-family: "PingFang SC"; font-weight: 400; src: local("PingFangSC-Regular"); }
@font-face { font-family: "PingFang SC"; font-weight: 450; src: local("PingFangSC-Medium"); }
@font-face { font-family: "PingFang SC"; font-weight: 500; src: local("PingFangSC-Medium"); }
@font-face { font-family: "PingFang SC"; font-weight: 550; src: local("PingFangSC-Semibold"); }
@font-face { font-family: "PingFang SC"; font-weight: 600; src: local("PingFangSC-Semibold"); }
@font-face { font-family: "PingFang SC"; font-weight: 700; src: local("PingFangSC-Semibold"); }
@font-face { font-family: "PingFang SC"; font-weight: 800; src: local("PingFangSC-Semibold"); }
@font-face { font-family: "PingFang SC"; font-weight: 900; src: local("PingFangSC-Semibold"); }

/* ---------- Login: liquid glass card on a dark stage (always dark, whatever the system theme) ---------- */
body:has(> #login:not([hidden])) { background: #050506; }
#login {
  --lg-accent: #FF5A1F;
  position: relative; min-height: var(--app-h); overflow: hidden; color-scheme: dark;
  background: radial-gradient(120% 90% at 50% 40%, #121214 0%, #050506 70%);
  color: #f4f4f5;
  font-family: var(--font-sans);
  container: lg / inline-size;
}
#login a { color: rgba(255,255,255,.82); }

/* Background video (the poster shows until it plays, or for good in Low Power Mode) */
#login .lg-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#login .lg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#login .lg-dim { position: absolute; inset: 0; background: rgba(0,0,0,.2); }

#login .lg-stage {
  position: relative; z-index: 1; min-height: var(--app-h);
  display: flex; align-items: center; justify-content: center;
  padding: max(48px, calc(env(safe-area-inset-top) + 24px)) max(24px, env(safe-area-inset-right))
           max(48px, calc(env(safe-area-inset-bottom) + 24px)) max(24px, env(safe-area-inset-left));
}

/* Liquid glass (React Bits GlassSurface, dark values). glass.js adds the layers to every [data-glass]
   element and picks the renderer: Chromium refracts through an SVG filter (--glass-filter), Safari /
   Firefox through WebGL over the video, else frosted. The card wears it on desktop, the pills on phones. */
#login { --glass-frost: .1; --glass-tint: 0%; --glass-saturation: 1; }
#login .glass-surface__filter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; z-index: -1; }
#login :is(.glass-surface__canvas, .glass-surface__frame, .glass-surface__sheen, .glass-surface__rim) {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none;
}
#login .glass-surface__frame { background: hsl(0 0% var(--glass-tint) / var(--glass-frost)); }
#login .glass-surface__sheen { background: linear-gradient(135deg, hsl(0 0% 100% / .14) 0%, transparent 42%, transparent 64%, hsl(0 0% 100% / .05) 100%); }
#login .glass-surface__rim {
  padding: 3px;
  background: linear-gradient(150deg, hsl(0 0% 100% / .34), hsl(0 0% 100% / .03) 45%, hsl(0 0% 100% / .02) 60%, hsl(0 0% 100% / .18));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* Each renderer shows only its own layers; a surface whose glass is off shows none (pills on desktop). */
#login .glass-surface:not(.glass-surface--webgl) > :is(.glass-surface__canvas, .glass-surface__frame),
#login .glass-surface:not(.glass-surface--fallback) > :is(.glass-surface__sheen, .glass-surface__rim),
#login .lg-pill > :is(.glass-surface__canvas, .glass-surface__frame, .glass-surface__sheen, .glass-surface__rim) { display: none; }

/* The shadow stacks of the three looks, shared by the desktop card and the phone pills */
#login {
  --glass-inset:
    0 0 2px 1px color-mix(in oklch, white, transparent 65%) inset,
    0 0 10px 4px color-mix(in oklch, white, transparent 85%) inset,
    0 4px 16px rgba(17,17,26,.05) inset,
    0 8px 24px rgba(17,17,26,.05) inset,
    0 16px 56px rgba(17,17,26,.05) inset;
  --glass-inset-frosted:
    inset 0 1px 0 0 hsl(0 0% 100% / .3),
    inset 0 -1px 0 0 hsl(0 0% 100% / .08),
    0 0 2px 1px color-mix(in oklch, white, transparent 72%) inset,
    0 0 12px 3px color-mix(in oklch, white, transparent 90%) inset;
}
/* Only constants live in those variables: tint, frost and the per-element --glass-filter must be read
   where they're used, so the rules below spell them out. */
#login .glass-surface__frame { box-shadow: var(--glass-inset); }

/* Desktop card */
#login .lg-card {
  position: relative; width: min(520px, 100%); border-radius: 32px; overflow: hidden;
  --glass-drop: 0 4px 16px rgba(17,17,26,.05), 0 8px 24px rgba(17,17,26,.05), 0 16px 56px rgba(17,17,26,.05), 0 40px 100px -30px rgba(0,0,0,.6);
}
#login .lg-card-body { position: relative; z-index: 1; padding: 56px 64px 44px; border-radius: inherit; }
#login .lg-card.glass-surface--svg {
  background: hsl(0 0% var(--glass-tint) / var(--glass-frost));
  -webkit-backdrop-filter: var(--glass-filter) saturate(var(--glass-saturation));
  backdrop-filter: var(--glass-filter) saturate(var(--glass-saturation));
  box-shadow: var(--glass-inset), var(--glass-drop);
}
#login .lg-card.glass-surface--webgl { box-shadow: var(--glass-drop); }
#login .lg-card.glass-surface--fallback {
  background: hsl(0 0% 100% / calc(0.04 + var(--glass-frost) * 0.3));
  -webkit-backdrop-filter: blur(12px) saturate(1.4) brightness(1.04);
  backdrop-filter: blur(12px) saturate(1.4) brightness(1.04);
  box-shadow: var(--glass-inset-frosted), var(--glass-drop);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #login .glass-surface--fallback { background: hsl(0 0% 12% / .72); }
}

/* Title with the accent bar under it */
#login .lg-title {
  position: relative; width: fit-content; margin: 0 auto 36px; padding: 4px 2px 18px;
  font-size: 40px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; color: #fff;
}
#login .lg-title-bar {
  position: absolute; left: 50%; bottom: 0; width: 40px; height: 3px; border-radius: 3px; transform: translateX(-50%);
  background: var(--lg-accent); box-shadow: 0 0 14px var(--lg-accent);
}

/* Form */
#login .lg-form { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
#login .lg-field { display: flex; flex-direction: column; gap: 8px; }
#login .lg-label { font-size: 13px; color: rgba(255,255,255,.66); padding-left: 2px; }
#login .lg-input-wrap { position: relative; }
#login .lg-input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); color: #fff;
  font: inherit; font-size: 16px; outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07); transition: border-color .2s, box-shadow .2s, background .2s;
}
#login .lg-input::placeholder { color: transparent; }  /* the label says it; phones show the placeholder instead */
#login .lg-input:hover { border-color: rgba(255,255,255,.18); }
#login .lg-input:focus {
  border-color: color-mix(in srgb, var(--lg-accent) 70%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 4px color-mix(in srgb, var(--lg-accent) 20%, transparent);
}
#login .lg-input--icon { padding-right: 52px; }
#login .lg-eye {
  position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; border-radius: 10px;
  color: rgba(255,255,255,.6); display: grid; place-items: center; cursor: pointer;
}
#login .lg-eye:hover { color: #fff; }
#login .lg-eye-slash { display: none; }
#login .lg-eye[aria-pressed="true"] .lg-eye-slash { display: inline; }

#login .lg-submit {
  display: block; width: 100%; max-width: 420px; height: 50px; margin: 6px auto 0; padding: 0;
  border-radius: 14px; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; letter-spacing: .02em;
  color: #0b0b0c; background: linear-gradient(180deg, #ffffff, #d9d9de);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px rgba(0,0,0,.12), 0 12px 30px -10px rgba(255,255,255,.35);
  transition: transform .15s, box-shadow .2s;
}
#login .lg-submit:hover { box-shadow: inset 0 1px 0 #fff, inset 0 -2px 6px rgba(0,0,0,.12), 0 14px 38px -10px rgba(255,255,255,.5); }
#login .lg-submit:active { transform: scale(.985); }
#login .lg-submit:disabled { opacity: .6; cursor: default; transform: none; }
/* Password button when the passkey button above is the main one */
#login .lg-submit--glass {
  color: #fff; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px -8px rgba(0,0,0,.7);
}
#login .lg-submit--glass:hover { border-color: rgba(255,255,255,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px -8px rgba(0,0,0,.7); }
#login .lg-submit:focus-visible, #login .lg-eye:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }
#login #passkey-login { margin-top: 0; }

#login .lg-divider {
  display: flex; align-items: center; gap: 14px; max-width: 420px; margin: 30px auto 18px;
  font-size: 12px; color: rgba(255,255,255,.55);
}
#login .lg-divider::before, #login .lg-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); }

#login .lg-error { max-width: 420px; margin: 16px auto 0; text-align: center; font-size: 13px; line-height: 1.6; color: #ff8a6b; }
#login .lg-error:empty { display: none; }

/* Narrow screens (by the login page's own width) */
#login .lg-reveal { display: none; }  /* phones only, see below */

/* Phones (by the login page's own width): no glass card. The title sits in the upper half,
   pill buttons at the bottom; with passkeys, the password field opens from "用密码登录". */
@container lg (max-width: 720px) {
  #login .lg-dim { background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.12) 45%, rgba(0,0,0,.45) 100%); }
  #login .lg-stage {
    align-items: stretch;
    padding: max(24px, calc(env(safe-area-inset-top) + 16px)) max(24px, env(safe-area-inset-right))
             max(28px, calc(env(safe-area-inset-bottom) + 16px)) max(24px, env(safe-area-inset-left));
  }
  #login .lg-card.lg-card {  /* doubled class: beats the .glass-surface--* looks above */
    display: flex; width: 100%; border-radius: 0; overflow: visible;
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #login .lg-card > :is(.glass-surface__canvas, .glass-surface__frame, .glass-surface__sheen, .glass-surface__rim) { display: none; }
  #login .lg-card-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; }
  /* No visible title on phones (the video is the picture); screen readers still get it */
  #login .lg-title { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }

  /* Glass pills: buttons and the password field (the field's wrapper wears the glass) */
  #login .lg-pill {
    position: relative; isolation: isolate; overflow: hidden; height: 52px; border-radius: 999px; border: 0;
    --glass-drop: 0 10px 28px -12px rgba(0,0,0,.65);
  }
  #login .lg-pill > :is(.glass-surface__filter, .glass-surface__canvas, .glass-surface__frame, .glass-surface__sheen, .glass-surface__rim) { z-index: -1; }
  #login .lg-pill.glass-surface--webgl > :is(.glass-surface__canvas, .glass-surface__frame),
  #login .lg-pill.glass-surface--fallback > :is(.glass-surface__sheen, .glass-surface__rim) { display: block; }
  #login .lg-pill.glass-surface--svg {
    background: hsl(0 0% var(--glass-tint) / var(--glass-frost));
    -webkit-backdrop-filter: var(--glass-filter) saturate(var(--glass-saturation));
    backdrop-filter: var(--glass-filter) saturate(var(--glass-saturation));
    box-shadow: var(--glass-inset), var(--glass-drop);
  }
  #login .lg-pill.glass-surface--webgl { background: none; box-shadow: var(--glass-drop); }
  #login .lg-pill.glass-surface--fallback {
    background: hsl(0 0% 100% / calc(0.04 + var(--glass-frost) * 0.3));
    -webkit-backdrop-filter: blur(12px) saturate(1.4) brightness(1.04);
    backdrop-filter: blur(12px) saturate(1.4) brightness(1.04);
    box-shadow: var(--glass-inset-frosted), var(--glass-drop);
  }
  /* Main button: a whiter glass; the others stay clear */
  #login .lg-submit:not(.lg-submit--glass) { --glass-tint: 100%; --glass-frost: .22; }
  #login .lg-submit {
    margin-top: 0; color: #fff; font-size: 15px; font-weight: 500; letter-spacing: .04em;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
  #login .lg-input-wrap:focus-within { outline: 2px solid color-mix(in srgb, var(--lg-accent) 70%, transparent); outline-offset: 2px; }
  #login .lg-input {
    height: 52px; padding: 0 56px 0 22px; border: 0; border-radius: 999px; background: transparent; box-shadow: none;
  }
  #login .lg-input:focus { box-shadow: none; }
  #login .lg-input::placeholder { color: rgba(255,255,255,.42); }
  #login .lg-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }  /* placeholder says it */
  #login .lg-form { gap: 12px; }
  #login .lg-divider { display: none; }
  #login .lg-reveal { display: block; margin-top: 12px; }
  #login #passkey-login, #login .lg-reveal, #login .lg-form { width: 100%; max-width: 360px; margin-left: auto; margin-right: auto; }
  #login:not(.lg--password-open) .lg-reveal:not([hidden]) ~ .lg-form { display: none; }
  #login.lg--password-open .lg-reveal { display: none; }
  #login #passkey-login:not([hidden]) ~ .lg-form { margin-top: 12px; }
}

/* ---------- Chat page: dark glass, from docs/superpowers/specs/2026-10-15-chat-ui-mockup.html ---------- */
body:has(> #main:not([hidden])) { background: #0a0a0b; }
#main, #settings, #viewer, #player {
  color: #f4f4f5; color-scheme: dark;
  font-family: var(--font-sans);
}
:where(#main, #settings, #viewer, #player) :where(button, input, textarea) { font: inherit; color: inherit; }
:where(#main, #settings, #viewer, #player) button { cursor: pointer; }
:where(#main, #settings, #viewer, #player) button:disabled { opacity: .45; cursor: default; }
#main a, #settings a { color: #ff8a5c; }
#main { position: relative; display: flex; height: var(--app-h); overflow: hidden; background: #0a0a0b; }
.cs-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }

.cs-icon-btn {
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; display: grid; place-items: center;
  color: rgba(255,255,255,.78); transition: background .2s, color .2s; flex: 0 0 auto;
}
.cs-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.cs-icon-btn:disabled:hover { background: transparent; color: rgba(255,255,255,.78); }

/* Header on phones: two round frosted-glass buttons (menu, new chat) over a light eased fade that guards the status
   bar; content scrolling up shows blurred through the buttons. The fade is kept light: over a dark one, glass looked
   darker at the top as if something covered it (checked in Chrome, 10-16). Wide screens have no header. */
.cs-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between;
  height: calc(64px + env(safe-area-inset-top)); pointer-events: none;  /* only the buttons take taps */
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}
.cs-header::before {  /* under the buttons (the header is their stacking context) */
  content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: calc(96px + env(safe-area-inset-top));
  background: linear-gradient(rgba(10,10,11,.72) 0%, rgba(10,10,11,.62) 14%, rgba(10,10,11,.48) 30%, rgba(10,10,11,.32) 46%,
    rgba(10,10,11,.18) 62%, rgba(10,10,11,.08) 78%, rgba(10,10,11,.02) 90%, rgba(10,10,11,0) 100%);
}
.cs-header .cs-icon-btn {
  pointer-events: auto; background: rgba(44,44,48,.5); color: #fff;
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px -6px rgba(0,0,0,.6);  /* no outline, just a top highlight */
}
.cs-header .cs-icon-btn svg { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.55)); }  /* readable over a bright photo */
.cs-header .cs-icon-btn:hover { background: rgba(60,60,66,.6); color: #fff; }
.cs-header .cs-icon-btn:disabled:hover { background: rgba(44,44,48,.5); color: #fff; }
/* Camera status, under the name at the foot of the sidebar */
.cs-status { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.72); }
#status-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-status[data-state="online"] { --dot: #3ddc84; }
.cs-status[data-state="error"] { --dot: #f5b841; color: #ff8a6b; }
.cs-status[data-state="offline"] { --dot: #ff5a4f; }
.cs-status:is([data-state="online"], [data-state="offline"])::before {  /* a breathing dot */
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 8px var(--dot);
  animation: cs-breathe 2.4s ease-in-out infinite;
}
@keyframes cs-breathe { 50% { opacity: .35; transform: scale(.8); box-shadow: 0 0 2px var(--dot); } }

/* "Use Face ID next time?" */
.cs-offer {
  position: absolute; z-index: 7; top: calc(62px + env(safe-area-inset-top)); left: 10px; right: 10px; max-width: 520px; margin: 0 auto;
  display: grid; gap: 10px; padding: 14px 16px; border-radius: 20px; font-size: 15px;
  background: rgba(30,30,33,.72); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 0 1px rgba(255,255,255,.08), 0 14px 34px -12px rgba(0,0,0,.7);
}
.cs-offer div { display: flex; gap: 8px; }
.cs-offer button { height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid rgba(255,255,255,.14); background: transparent; }
.cs-offer button.primary { background: #f4f4f5; color: #0b0b0c; border-color: transparent; }
.cs-offer .small { font-size: 13px; color: rgba(255,255,255,.6); }
.cs-offer .small:empty { display: none; }

/* Conversation */
.cs-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cs-thread {
  max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px;
  padding: calc(92px + env(safe-area-inset-top)) 16px calc(130px + env(safe-area-inset-bottom));  /* clear of the header fade */
}
.cs-thread:empty { display: none; }
.msg { word-break: break-word; }
.msg.user {
  align-self: flex-end; max-width: 84%; background: #232326; border-radius: 22px 22px 6px 22px; padding: 10px 16px;
  font-size: 16px; line-height: 1.55; white-space: pre-wrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.msg.assistant { font-size: 16px; line-height: 1.75; color: #e8e8eb; }
.msg.pending {
  align-self: flex-start; font-size: 15px; font-weight: 500;
  background: linear-gradient(90deg, rgba(255,255,255,.35) 0%, #fff 50%, rgba(255,255,255,.35) 100%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: cs-shimmer 1.6s linear infinite;
}
@keyframes cs-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* A question asked aloud: its bubble shows "listening / transcribing" until the words arrive (app.js followVoice) */
.msg.user.voice { color: rgba(255,255,255,.72); animation: cs-pulse 1.4s ease-in-out infinite; }
.msg.user.voice.failed { color: #ff8a6b; animation: none; }
/* Line icons drawn as a mask in the text's colour (no emoji): a microphone before a question asked aloud (and before
   the title of a voice conversation in the sidebar), a camera before a photo's time */
:root {
  --icon-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cpath d='M12 19v3'/%3E%3C/svg%3E");
  --icon-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E");
}
.msg.user.voice::before, .msg.photo small::before, .cs-viewer-bar small::before, .cs-hitem.voice .cs-htitle::before {
  content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: .4em; vertical-align: -.22em;
  background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.msg.user.voice::before, .cs-hitem.voice .cs-htitle::before { --icon: var(--icon-mic); }
.msg.photo small::before, .cs-viewer-bar small::before { --icon: var(--icon-camera); }
.cs-hitem.voice .cs-htitle::before { width: 1em; height: 1em; margin-right: .35em; vertical-align: -.15em; opacity: .7; }
@keyframes cs-pulse { 50% { opacity: .55; } }
.msg.error { align-self: flex-start; color: #ff8a6b; font-size: 15px; background: none; animation: none; }
.msg.photo {
  align-self: flex-start; width: min(100%, 420px); border-radius: 18px; overflow: hidden; color: inherit; text-decoration: none;
  background: #141416; border: 1px solid rgba(255,255,255,.08);
}
#main .msg.photo { color: inherit; }
.msg.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.msg.photo small { display: block; padding: 8px 12px; font: 11px/1.4 var(--font-mono); letter-spacing: .04em; color: rgba(255,255,255,.55); }
.retry {
  align-self: flex-start; height: 36px; padding: 0 16px; border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
}

/* Markdown answer */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 12px; white-space: pre-line; }
.md :is(ul, ol) { margin: 0 0 12px; padding-left: 22px; }
.md li { margin: 4px 0; white-space: pre-line; }
.md li::marker { color: rgba(255,255,255,.45); }
.md :is(h3, h4, h5) { margin: 18px 0 8px; font-size: 16px; font-weight: 600; color: #f4f4f5; }
.md h3 { font-size: 17px; }
.md hr { border: 0; height: 1px; background: rgba(255,255,255,.1); margin: 16px 0; }
.md strong { font-weight: 600; color: #fff; }
.md code { font: 13px/1.5 var(--font-mono); background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 6px; }
.cs-code { margin: 4px 0 14px; border-radius: 14px; background: #141416; border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.cs-code-head {
  height: 38px; padding: 0 6px 0 14px; display: flex; align-items: center; justify-content: space-between;
  font: 12px/1 var(--font-mono); color: rgba(255,255,255,.55); background: rgba(255,255,255,.03);
}
.cs-code-copy {
  height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: rgba(255,255,255,.65);
  font-size: 12px; display: flex; align-items: center; gap: 6px;
}
.cs-code-copy:hover { background: rgba(255,255,255,.08); color: #fff; }
.cs-code pre { margin: 0; padding: 14px 16px; overflow-x: auto; white-space: pre; }
.cs-code pre code { font: 13px/1.65 var(--font-mono); color: #d8d8dd; background: none; padding: 0; }
.cs-actions { display: flex; align-items: center; gap: 4px; margin: 6px 0 0 -10px; }
.cs-actions small { font: 11px/1 var(--font-mono); letter-spacing: .04em; color: rgba(255,255,255,.45); }
.cs-copy { width: auto; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 19px; display: flex; gap: 6px; font-size: 12px; color: rgba(255,255,255,.55); }
.cs-copy span:empty { display: none; }

/* New chat */
.cs-empty {
  position: relative; isolation: isolate;  /* the ASCII glow sits behind the page's own content */
  min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center;
  padding: calc(96px + env(safe-area-inset-top)) 16px calc(150px + env(safe-area-inset-bottom));
}
.cs-orb {
  position: relative; width: 64px; height: 64px; border-radius: 43% 57% 61% 39% / 46% 38% 62% 54%;
  background: conic-gradient(from 200deg, #0a0a0b, #e9e9ec 9%, #4a4a4e 18%, #ffffff 27%, #18181a 38%, #a7a7ad 50%, #fbfbfc 60%, #2a2a2d 72%, #d4d4d8 84%, #0a0a0b);
  -webkit-mask: radial-gradient(closest-side, transparent 33%, #000 36%); mask: radial-gradient(closest-side, transparent 33%, #000 36%);
  animation: cs-morph 9s ease-in-out infinite alternate, cs-spin 24s linear infinite;
}
/* With WebGL2, crystal.js draws its crystal ball in here instead of this CSS orb */
.cs-orb.crystal { width: 128px; height: 128px; background: none; -webkit-mask: none; mask: none; animation: none; border-radius: 0; }
.cs-orb.crystal::after { display: none; }
.cs-orb::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(38% 26% at 30% 22%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(closest-side, rgba(0,0,0,.8) 34%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 80%, rgba(0,0,0,.55) 100%);
}
@keyframes cs-morph {
  0% { border-radius: 43% 57% 61% 39% / 46% 38% 62% 54%; }
  50% { border-radius: 58% 42% 36% 64% / 57% 63% 37% 43%; }
  100% { border-radius: 34% 66% 54% 46% / 40% 50% 50% 60%; }
}
@keyframes cs-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
.cs-hello { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -.01em; color: #f4f4f5; }
.cs-suggest { width: 100%; max-width: 640px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* ASCII glow rising from the bottom of the new chat page (ascii-glow.js draws it with WebGL2; .has-ascii once it does):
   the cards get a frosted backing over it, and the composer drops its dark fade so the light reaches behind it */
.cs-ascii { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; }
.cs-ascii canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cs-empty.has-ascii .cs-chip { background: rgba(20,20,22,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cs-empty.has-ascii .cs-chip:hover { background: rgba(32,32,35,.78); }
.cs-main:has(.cs-empty.has-ascii:not([hidden])) .cs-composer { background: none; }
.cs-chip {
  min-height: 88px; padding: 14px; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; transition: background .2s, border-color .2s;
}
.cs-chip:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.cs-chip-title { font-size: 14px; font-weight: 500; color: #f2f2f4; }
.cs-chip-sub { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.55); }

/* Composer (glass) */
.cs-composer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding: 28px max(10px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: linear-gradient(to top, rgba(10,10,11,.86) 0%, rgba(10,10,11,.6) 30%, rgba(10,10,11,.25) 62%, rgba(10,10,11,0));
}  /* light enough for the box's frosted glass to show what scrolls behind it */
.cs-box {
  position: relative; max-width: 760px; margin: 0 auto; display: flex; align-items: flex-end; gap: 8px;
  border-radius: 28px; padding: 6px 6px 6px 44px;  /* room for the status dot */
  background: rgba(40,40,44,.5); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 14px 34px -12px rgba(0,0,0,.7);  /* no outline, just a top highlight */
}
.cs-input {
  flex: 1; min-width: 0; display: block; min-height: 44px; max-height: 168px; padding: 10px 0; border: 0; outline: none; resize: none;
  overflow-y: hidden;  /* autosize() turns scrolling on past max-height */
  background: transparent; color: #f4f4f5; font-size: 16px; line-height: 1.5;
}
.cs-input::placeholder { color: rgba(255,255,255,.45); }
.cs-input { scrollbar-width: none; }  /* long text still scrolls, without a scrollbar */
.cs-input::-webkit-scrollbar { display: none; }
/* More than one line (see autosize() in app.js): the text takes the full width, the send button the row below */
.cs-box.multiline { flex-direction: column; align-items: stretch; gap: 2px; padding: 6px 6px 6px 18px; }  /* the dot moves down */
/* Camera status at the start of the composer, level with the send button. One line: just the sidebar's breathing dot
   beside the text. More lines: the dot goes to the button's row below the text, in a pill as tall as the button with
   the status written in it (the dot stays where it was: pill at 6px + 16px padding = 22px) */
.cs-dot {
  position: absolute; left: 22px; bottom: 24px; display: flex; align-items: center; gap: 8px; border-radius: 22px;
  font-size: 13px; color: rgba(255,255,255,.72); white-space: nowrap;
}
.cs-dot[data-state="online"] { --dot: #3ddc84; }
.cs-dot[data-state="offline"] { --dot: #ff5a4f; }
.cs-dot[data-state="error"] { --dot: #f5b841; color: #ff8a6b; }
.cs-dot:is([data-state="online"], [data-state="offline"])::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 8px var(--dot);
  animation: cs-breathe 2.4s ease-in-out infinite;
}
#composer-status-text { display: none; }
.cs-box.multiline .cs-dot[data-state] { left: 6px; bottom: 6px; height: 44px; padding: 0 16px; background: rgba(255,255,255,.08); }
.cs-box.multiline .cs-dot[data-state] #composer-status-text { display: inline; }
.cs-box.multiline .cs-input { flex: none; padding-right: 12px; }  /* flex: 1 would size it by the column, not its height */
.cs-box.multiline .cs-send { align-self: flex-end; }
.cs-send {
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(180deg, #fff, #d9d9de); color: #0b0b0c; box-shadow: inset 0 1px 0 #fff, 0 6px 16px -6px rgba(255,255,255,.35);
  transition: transform .15s, opacity .2s;
}
.cs-send:active { transform: scale(.94); }
#main .cs-send:disabled { opacity: 1; background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); box-shadow: none; }

/* Sidebar (drawer on phones) */
.cs-scrim { display: none; position: absolute; inset: 0; z-index: 15; border: 0; padding: 0; background: rgba(0,0,0,.55); animation: cs-fade .25s ease-out; }
#main.drawer-open .cs-scrim { display: block; }
@keyframes cs-fade { from { opacity: 0; } }
.cs-side {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 20; width: min(84%, 320px); display: flex; flex-direction: column; gap: 4px;
  padding: calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  background: #111113; box-shadow: 1px 0 0 rgba(255,255,255,.06), 24px 0 60px -20px rgba(0,0,0,.8);
  transform: translateX(-104%); visibility: hidden; transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s .32s;
}
#main.drawer-open .cs-side { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.cs-side-top { display: flex; align-items: center; gap: 6px; }
.cs-newchat {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent;
  display: flex; align-items: center; gap: 10px; font-size: 15px;
}
.cs-newchat:hover { background: rgba(255,255,255,.06); }
.cs-text-btn { height: 32px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: rgba(255,255,255,.72); font-size: 13px; }
.cs-text-btn:hover { background: rgba(255,255,255,.06); }
.cs-history { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
#history-list { list-style: none; margin: 0; padding: 0; }
/* Sidebar section 聊天 (sidebar.js): a title row that folds the list under it */
.cs-sec + .cs-sec { margin-top: 12px; }
.cs-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 36px; }
.cs-sec-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.62);
}
.cs-sec-toggle:hover { background: rgba(255,255,255,.05); color: #fff; }
.cs-chev { transition: transform .2s; }
.cs-sec.collapsed .cs-chev { transform: rotate(-90deg); }
.cs-sec.collapsed .cs-sec-body, .cs-sec.collapsed .cs-sec-actions { display: none; }
.cs-more {
  width: 100%; height: 36px; margin-top: 2px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent;
  text-align: left; font-size: 13px; color: rgba(255,255,255,.55);
}
.cs-more:hover { background: rgba(255,255,255,.05); color: #fff; }
/* A state with a coloured dot before it (no emoji): on / online green, away yellow, down red, anything else grey */
.cs-state::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; vertical-align: 1px;
  background: var(--dot, rgba(255,255,255,.35));
}
.cs-state:empty::before { content: none; }
.cs-state[data-state="on"], .cs-state[data-state="online"] { --dot: #3ddc84; }
.cs-state[data-state="away"] { --dot: #f5b841; }
.cs-state[data-state="down"] { --dot: #ff5a4f; }
.cs-group { margin: 14px 0 4px; padding: 0 12px; font: 11px/1.4 var(--font-mono); letter-spacing: .08em; color: rgba(255,255,255,.5); }
.cs-group:first-child { margin-top: 6px; }
.cs-hitem {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 12px;
  font-size: 15px; color: rgba(255,255,255,.82); cursor: pointer;
}
.cs-hitem:hover { background: rgba(255,255,255,.05); }
.cs-hitem.is-active { background: rgba(255,255,255,.09); color: #fff; }
.cs-htitle { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-hitem .check { display: none; width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); }
#history.editing .cs-hitem .check { display: block; }
.cs-hitem.selected .check { background: #FF5A1F; border-color: #FF5A1F; box-shadow: inset 0 0 0 3px #111113; }
.cs-history-note { padding: 12px; font-size: 14px; color: rgba(255,255,255,.5); }
.cs-history-error { width: 100%; padding: 12px; border: 0; background: transparent; text-align: left; font-size: 14px; color: #ff8a6b; }
#history-actions { padding: 6px 0; }
.cs-danger { width: 100%; height: 44px; border-radius: 14px; border: 1px solid rgba(255,138,107,.4); background: rgba(255,90,31,.08); color: #ff8a6b; font-size: 15px; }
.cs-me { height: 56px; padding: 0 0 0 12px; border-radius: 14px; display: flex; align-items: center; gap: 10px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.cs-me-name { flex: 1; min-width: 0; }

/* Settings (settings.js): on phones a full-height sheet, the categories first and the page after a tap; on wide
   screens a dialog with the categories on the left and the page on the right */
#settings { position: fixed; inset: 0; z-index: 30; }
.cs-sheet-scrim { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(0,0,0,.5); animation: cs-fade .2s ease-out; }
.cs-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: calc(10px + env(safe-area-inset-top)); display: flex; flex-direction: column;
  padding: 8px 8px calc(14px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
  background: rgba(26,26,29,.9); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 -20px 60px -20px rgba(0,0,0,.8); animation: cs-up .32s cubic-bezier(.2,.8,.2,1);
}
@keyframes cs-up { from { transform: translateY(100%); } }
.cs-grab { width: 40px; height: 5px; margin: 4px auto 6px; border-radius: 3px; background: rgba(255,255,255,.22); flex: none; }
#settings-close { position: absolute; top: 10px; right: 10px; z-index: 1; }
.cs-sheet-head { display: flex; align-items: center; min-height: 44px; padding: 0 56px 0 12px; font-size: 17px; }
.cs-set-nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0 6px 8px; }
.cs-set-group { margin: 14px 12px 4px; font-size: 12px; color: rgba(255,255,255,.45); }
.cs-set-tab {
  display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border: 0; border-radius: 12px;
  background: transparent; font-size: 15px; text-align: left;
}
.cs-set-tab::after { content: "›"; margin-left: auto; font-size: 20px; color: rgba(255,255,255,.35); }
.cs-set-tab:hover { background: rgba(255,255,255,.06); }
.cs-set-icon { flex: none; color: rgba(255,255,255,.78); }
.cs-set-pane { display: none; flex: 1; min-height: 0; flex-direction: column; }
#settings.page-open .cs-set-nav { display: none; }
#settings.page-open .cs-set-pane { display: flex; }
.cs-set-pane-head { display: flex; align-items: center; min-height: 44px; padding: 0 56px 0 2px; flex: none; }
.cs-set-page { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; padding: 0 14px 8px; align-content: start; }
.cs-set-page[hidden] { display: none; }
.cs-set-title { margin: 4px 0 6px; font-size: 22px; font-weight: 600; color: #fff; }
.cs-set-label { margin: 12px 0 0; font-size: 13px; color: rgba(255,255,255,.55); }
#settings .small { font-size: 14px; color: rgba(255,255,255,.72); margin: 0; }
.cs-set-msg:empty { display: none; }
.cs-card { margin: 0; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.cs-card:empty { display: none; }
.cs-card.stale { opacity: .5; }
.cs-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; font-size: 15px; }
.cs-row + .cs-row { border-top: 1px solid rgba(255,255,255,.06); }
.cs-row dd { margin: 0; text-align: right; color: rgba(255,255,255,.6); }
#passkey-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
#passkey-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; }
#passkey-list li + li { border-top: 1px solid rgba(255,255,255,.06); }
#passkey-list li.empty { color: rgba(255,255,255,.5); }
#passkey-list div { display: grid; min-width: 0; }
#passkey-list strong { font-weight: 500; }
#passkey-list small { color: rgba(255,255,255,.5); font-size: 12px; }
#passkey-add { display: grid; gap: 8px; }
#watch-home { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cs-lang { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-set-page .cs-lang button[aria-pressed="true"] { background: #f4f4f5; color: #0b0b0c; border-color: transparent; }
#settings input { height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.06); outline: none; }
#settings input:focus { border-color: color-mix(in srgb, #FF5A1F 60%, transparent); }
.cs-set-page button { min-height: 44px; padding: 10px 16px; line-height: 1.3; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); }
.cs-set-page button:hover { background: rgba(255,255,255,.1); }
.cs-set-page button[type="submit"] { background: #f4f4f5; color: #0b0b0c; border-color: transparent; }
.cs-set-page button.danger { color: #ff8a6b; border-color: rgba(255,138,107,.4); }
#passkey-list li button { flex: none; min-height: 34px; padding: 6px 12px; font-size: 14px; }

/* 猫监控 grid (monitor.js): replaces the chat and the composer in the middle while #main has .monitor-on */
.cs-side-link { flex: none; }
.cs-side-link.is-active { background: rgba(255,255,255,.09); }
.cs-monitor {
  display: none; flex: 1; min-height: 0; overflow-y: auto;
  padding: calc(68px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
#main.monitor-on .cs-monitor { display: block; }
.cs-monitor:focus { outline: none; }  /* focused only as a fallback when the player closes */
#main.monitor-on #chat, #main.monitor-on .cs-composer { display: none; }
.cs-monitor > * { max-width: 1100px; margin-inline: auto; }
.cs-mhead { display: flex; align-items: baseline; gap: 12px; }
.cs-mtitle { margin: 0; font-size: 20px; font-weight: 600; }
.cs-mhead .cs-state { font-size: 13px; color: rgba(255,255,255,.62); }
.cs-mtoday { margin-left: auto; font-size: 13px; color: rgba(255,255,255,.55); }
.cs-mday { margin: 24px auto 10px; font: 400 11px/1.4 var(--font-mono); letter-spacing: .08em; color: rgba(255,255,255,.5); }
.cs-mgrid { list-style: none; margin-block: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px 14px; }
.cs-mgrid button {
  width: 100%; padding: 0; border: 0; border-radius: 10px; background: none; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
}
.cs-mgrid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; margin-bottom: 6px;
  background: rgba(255,255,255,.06); transition: filter .15s;
}
.cs-mgrid button:hover img { filter: brightness(1.15); }
.cs-mtime { font-size: 14px; }
.cs-mline { font-size: 12px; color: rgba(255,255,255,.5); }
.cs-mnote { margin-top: 40px; color: rgba(255,255,255,.6); }
#monitor-sentinel { height: 1px; }
@media (max-width: 600px) {
  .cs-mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
}

/* Activity player (player.js): over the whole window, the frames in the middle, arrows at the window's edges */
#player {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; outline: none;
  padding: calc(16px + env(safe-area-inset-top)) max(72px, calc(56px + env(safe-area-inset-right)))
    calc(16px + env(safe-area-inset-bottom)) max(72px, calc(56px + env(safe-area-inset-left)));
}
#player[hidden] { display: none; }
.cs-player-scrim { position: absolute; inset: 0; border: 0; padding: 0; background: rgba(0,0,0,.86); animation: cs-fade .2s ease-out;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);  /* like the photo viewer: the page behind must not show through */
}
.cs-player-info { position: relative; margin: 0; font: 12px/1.4 var(--font-mono); letter-spacing: .04em; color: rgba(255,255,255,.6); text-align: center; }
.cs-player-stage {
  position: relative; flex: none; aspect-ratio: 4 / 3;
  width: min(100%, calc((var(--app-h) - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 4 / 3));
  border-radius: 10px; overflow: hidden; background: #000; animation: cs-pop .2s ease-out;
}
.cs-player-stage:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
#player-frame { width: 100%; height: 100%; object-fit: contain; display: block; }
#player-frame[hidden] { display: none; }
.cs-player-note { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); }
.cs-player-note[hidden] { display: none; }
.cs-player-ctl { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 8px; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.cs-player-ctl[hidden] { display: none; }
#player-seek { width: 100%; margin: 0 0 4px; accent-color: #fff; }
.cs-player-row { display: flex; align-items: center; gap: 8px; }
.cs-player-row small { margin-left: auto; font: 12px/1.4 var(--font-mono); color: rgba(255,255,255,.85); }
.cs-player-icon {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 9px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.cs-player-icon:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(255,255,255,.12); }
.cs-player-icon[aria-disabled="true"] { opacity: .4; cursor: default; }
.cs-player-icon[hidden] { display: none; }
#player-play.paused .i-pause, #player-play:not(.paused) .i-play { display: none; }
.cs-player-arrow {
  position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border: 0; border-radius: 20px;
  background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center;
}
.cs-player-arrow:hover:not(:disabled) { background: rgba(255,255,255,.16); }
#player-prev { left: max(16px, env(safe-area-inset-left)); }
#player-next { right: max(16px, env(safe-area-inset-right)); }
.cs-player-bar {
  position: relative; display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 12px;
  background: #2a2a2d; box-shadow: 0 8px 30px rgba(0,0,0,.5);
}
.cs-player-bar .danger { color: #ff6b5e; }
.cs-player-ask, .cs-player-pill { display: none; }
.cs-player-bar.asking > .cs-player-icon { display: none; }
.cs-player-bar.asking .cs-player-ask { display: inline; padding: 0 8px; font-size: 14px; }
.cs-player-bar.asking .cs-player-pill { display: inline-flex; }
.cs-player-pill { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); font-size: 14px; align-items: center; }
.cs-player-bar .cs-player-pill.danger { background: #d9443a; color: #fff; }
#player-error { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; white-space: nowrap; font-size: 12px; color: #ff8a6b; }
#player-error[hidden] { display: none; }
@media (max-width: 600px) {
  #player { padding-inline: 0; }
  .cs-player-arrow { display: none; }
  .cs-player-stage { width: 100%; border-radius: 0; }
}

/* Photo viewer (viewer.js): the original over a dark scrim, Save / Close below it */
#viewer {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: calc(16px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
#viewer[hidden] { display: none; }
.cs-viewer-scrim {
  position: absolute; inset: 0; border: 0; padding: 0; background: rgba(0,0,0,.92); animation: cs-fade .2s ease-out;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);  /* the chat behind must not show through */
}
#viewer-img {
  position: relative; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px;
  animation: cs-pop .2s ease-out; -webkit-touch-callout: default;  /* iPhone: a long press still offers "Add to Photos" */
}
.cs-viewer-bar { position: relative; flex: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.cs-viewer-bar small { width: 100%; text-align: center; font: 11px/1.4 var(--font-mono); letter-spacing: .04em; color: rgba(255,255,255,.55); }
.cs-viewer-bar small:empty { display: none; }
.cs-viewer-btn {
  min-width: 112px; height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); font-size: 15px;
}
.cs-viewer-btn:hover:not(:disabled) { background: rgba(255,255,255,.14); }
.cs-viewer-btn.primary { background: #f4f4f5; color: #0b0b0c; border-color: transparent; }
.cs-viewer-btn.primary:hover:not(:disabled) { background: #fff; }

/* Wide screens: the sidebar stays, the conversation is centred */
@media (min-width: 960px) {
  .cs-side { position: relative; transform: none; visibility: visible; transition: none; width: 280px; flex: 0 0 280px; box-shadow: 1px 0 0 rgba(255,255,255,.06); }
  #main.drawer-open .cs-scrim, .cs-scrim, .cs-menu-btn, .cs-side-close { display: none; }
  .cs-header { display: none; }  /* the sidebar has New chat and the camera status */
  .cs-thread { padding: calc(32px + env(safe-area-inset-top)) 24px calc(130px + env(safe-area-inset-bottom)); }
  .cs-empty { padding-top: calc(48px + env(safe-area-inset-top)); }
  .cs-offer { top: calc(16px + env(safe-area-inset-top)); }
  .cs-hello { font-size: 34px; }
  .cs-suggest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-composer { padding: 28px max(24px, env(safe-area-inset-right)) 14px max(24px, env(safe-area-inset-left)); }
  .cs-monitor { padding-top: calc(32px + env(safe-area-inset-top)); }
  .cs-sheet {
    top: 50%; bottom: auto; left: 50%; right: auto; width: min(880px, calc(100vw - 48px)); height: min(620px, calc(var(--app-h) - 48px));
    translate: -50% -50%; display: grid; grid-template-columns: 230px 1fr; padding: 0; border-radius: 22px; overflow: hidden;
    animation: cs-pop .2s ease-out;
  }
  .cs-grab, #settings-back { display: none; }
  .cs-set-nav, #settings.page-open .cs-set-nav { display: flex; padding: 14px 10px; box-shadow: 1px 0 0 rgba(255,255,255,.08); }
  .cs-set-pane, #settings.page-open .cs-set-pane { display: flex; }
  .cs-set-pane-head { min-height: 20px; }
  .cs-set-tab::after { content: none; }
  .cs-set-tab[aria-current="true"] { background: rgba(255,255,255,.09); }
  .cs-set-page { padding: 8px 32px 24px; }
}
@keyframes cs-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .cs-orb, .msg.pending, .msg.user.voice, .cs-status::before, .cs-dot::before { animation: none; }
  .msg.pending { color: rgba(255,255,255,.7); background: none; }
  .cs-side, #main.drawer-open .cs-side, .cs-sheet, .cs-scrim, .cs-sheet-scrim { transition: none; animation: none; }
  .cs-viewer-scrim, #viewer-img, .cs-player-scrim, .cs-player-stage { animation: none; }
  .cs-mgrid img { transition: none; }
  .cs-chev { transition: none; }
}