@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Noto+Sans+SC:wght@400;500;600&display=swap');

:root { --ink: #17191d; --muted: #a5a8b0; --line: #e8e9ed; --paper: #fdfdfe; --chat-bg: #f9f9fb; --shadow: rgba(17, 22, 31, 0.08); }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', 'Noto Sans SC', sans-serif; }
button, input, textarea { font: inherit; }
button { padding: 0; border: 0; color: inherit; background: none; cursor: pointer; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid #262a31; outline-offset: 3px; }
.app { position: relative; min-height: 100vh; overflow: hidden; }
.site-header { position: fixed; z-index: 3; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; height: 86px; padding: 0 32px; pointer-events: none; }
.brand, .menu-toggle { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 600; }
.brand-mark { display: flex; width: 27px; height: 22px; align-items: center; justify-content: space-between; }
.brand-mark i { display: block; width: 9px; height: 9px; background: var(--ink); transform: rotate(45deg); }
.brand-mark i:nth-child(2) { width: 7px; height: 7px; margin-top: 12px; }
.brand-mark i:nth-child(3) { width: 5px; height: 5px; align-self: flex-start; }
.menu-toggle { display: grid; width: 34px; height: 34px; place-content: center; gap: 7px; }
.menu-toggle span { display: block; width: 21px; height: 1.5px; background: var(--ink); }
.view { position: relative; min-height: 100vh; }
.stage { display: grid; isolation: isolate; place-items: center; background: var(--paper); }
.stage::before, .chat::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  content: '';
  background:
    linear-gradient(115deg, rgba(17, 19, 24, .035), transparent 28%, rgba(96, 112, 125, .045) 52%, transparent 78%),
    repeating-linear-gradient(90deg, rgba(17, 19, 24, .025) 0 1px, transparent 1px 96px);
  background-size: 140% 140%, auto;
  animation: ambient-drift 18s ease-in-out infinite alternate;
}
.stage::after, .chat::after {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 34vh;
  content: '';
  background: linear-gradient(to top, rgba(17, 19, 24, .06), transparent);
  pointer-events: none;
}
.stage[hidden], .chat[hidden] { display: none; }
.character-figure[hidden], .stage-arrow[hidden], .start-hint[hidden], .empty-state[hidden] { display: none !important; }
.empty-state { display: grid; gap: 8px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--ink); font-size: 18px; font-weight: 600; }
.empty-state span { font-size: 13px; }
.stage-character-label { position: absolute; bottom: 78px; color: var(--ink); text-align: center; }
.stage-character-label strong { font-size: 15px; font-weight: 600; }
.character-figure { display: grid; width: min(39vw, 460px); height: min(78vh, 720px); margin-top: 6vh; place-items: end center; }
.motion-portrait { position: relative; display: block; width: 100%; height: 100%; transform-origin: center bottom; animation: character-breathe 4.8s ease-in-out infinite; will-change: transform; }
.motion-portrait::before {
  position: absolute;
  right: 13%;
  bottom: 7%;
  left: 13%;
  height: 11%;
  border-radius: 50%;
  background: rgba(17, 19, 24, .08);
  filter: blur(18px);
  content: '';
  animation: shadow-breathe 4.8s ease-in-out infinite;
}
.motion-portrait::after {
  position: absolute;
  inset: 10% 5% 3%;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 48% 48% 44% 44%;
  content: '';
  opacity: .42;
  transform: translateY(12px);
  pointer-events: none;
}
.motion-portrait img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 20px 15px rgba(24, 27, 35, 0.10)); transition: filter 250ms ease, transform 250ms ease; }
.character-model { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: transparent; }
.character-model[hidden] { display: none; }
.fbx-model canvas { display: block; width: 100%; height: 100%; }
.motion-portrait[data-mood="warm"] img { filter: drop-shadow(0 20px 15px rgba(178, 102, 74, 0.18)) saturate(1.08); }
.motion-portrait[data-mood="surprised"] { animation-name: character-surprised; }
.motion-portrait[data-mood="surprised"] img { filter: drop-shadow(0 22px 17px rgba(84, 104, 150, 0.18)) brightness(1.04); }
.character-figure:hover img { filter: drop-shadow(0 25px 18px rgba(24, 27, 35, 0.14)); transform: translateY(-3px); }
.motion-portrait.respond { animation: character-respond 760ms cubic-bezier(.2,.8,.2,1) both; }
.motion-portrait.talking img { animation: talking-sway 1.6s ease-in-out infinite; }
.blink { position: absolute; top: 15.4%; width: 7.5%; height: 1.1%; border-radius: 50%; background: rgba(27, 29, 34, 0); transform: scaleY(0); animation: character-blink 6.2s ease-in-out infinite; }
.blink-left { left: 41%; }.blink-right { right: 41%; }
.character-figure::after { position: absolute; z-index: -1; bottom: 13%; width: min(47vw, 560px); height: 100px; border: 1px solid #f0f1f5; border-radius: 50%; content: ''; }
.stage-arrow { position: absolute; top: 50%; z-index: 1; display: grid; width: 42px; height: 42px; border: 1px solid #dedfe4; border-radius: 50%; place-items: center; color: #60636a; font-size: 31px; font-weight: 300; line-height: 1; }
.stage-arrow:hover { border-color: #a9acb4; background: #fff; }
.previous { left: 8vw; }.next { right: 8vw; }
.start-hint { position: absolute; bottom: 31px; color: #adb0b7; font-size: 13px; }
.start-hint span { margin-right: 8px; font-size: 17px; }
.chat { display: grid; isolation: isolate; overflow: hidden; background: var(--chat-bg); place-items: end center; }
.chat-portrait { position: absolute; top: 55px; right: 0; bottom: 220px; left: 0; display: grid; overflow: hidden; place-items: end center; }
.chat-portrait .motion-portrait { width: min(57vw, 620px); min-width: 420px; height: auto; max-height: 88vh; }
.chat-portrait img { width: 100%; max-height: 88vh; object-fit: cover; object-position: top center; filter: drop-shadow(0 14px 24px rgba(17, 22, 31, 0.10)); }
.chat-sheet { position: relative; z-index: 1; width: min(740px, calc(100vw - 44px)); min-height: 262px; margin-bottom: 28px; padding: 28px 30px 19px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 8px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 12px 45px var(--shadow); backdrop-filter: blur(14px); }
.chat-intro { display: flex; gap: 14px; align-items: center; }
.mini-portrait { display: grid; width: 50px; height: 50px; overflow: hidden; flex: none; border-radius: 50%; background: #e6e8ec; place-items: start center; }
.mini-portrait img { width: 76px; max-width: none; margin-top: 5px; }
.chat-intro h1 { margin: 0; font-size: 16px; font-weight: 600; }
.chat-intro p { margin: 4px 0 0; font-size: 13px; }
.message-list { max-height: 132px; margin: 18px 0 13px; overflow: auto; }
.message { width: fit-content; max-width: 78%; margin: 7px 0; padding: 9px 12px; border-radius: 5px; background: #f5f5f7; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.user { margin-left: auto; color: #fff; background: var(--ink); }
.composer { display: flex; align-items: center; min-height: 60px; padding: 8px 10px 8px 20px; border: 1px solid #e4e5e9; border-radius: 30px; background: #fff; }
.composer textarea { width: 100%; min-height: 24px; max-height: 90px; padding: 0 12px 0 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; line-height: 24px; }
.composer textarea::placeholder { color: #babdc5; }
.composer-meta { display: flex; justify-content: space-between; gap: 12px; margin: 7px 8px 0; color: #b0b3bb; font-size: 10px; }
.send-button { display: grid; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--ink); color: #fff; font-size: 21px; line-height: 1; place-items: center; transform: rotate(-35deg); }
.send-button:hover { background: #363b44; }
.voice-button { flex: none; margin-right: 8px; color: #777c85; font-size: 12px; }
.voice-button:hover, .read-toggle:hover { color: var(--ink); }
.voice-button[data-listening="true"] { color: #a76060; }
.clear-chat { display: block; margin: 18px auto 0; color: #a5a8b0; font-size: 13px; }
.clear-chat span { margin-right: 7px; font-size: 17px; }
.read-toggle { display: block; margin: 8px auto 0; color: #a5a8b0; font-size: 11px; }
.ai-status { margin: 9px 0 0; color: #aaadb5; text-align: center; font-size: 11px; }
.ai-status[data-tone="error"] { color: #a76060; }
.send-button:disabled, .composer textarea:disabled { cursor: wait; opacity: .58; }
.message.pending { color: #858991; letter-spacing: .18em; }
.message.error { color: #9c4e4e; background: #fff4f4; }
.retry-button { display: block; margin-top: 6px; color: #626872; font-size: 12px; text-decoration: underline; }
.retry-button:hover { color: var(--ink); }
.scrim { position: fixed; z-index: 4; inset: 0; background: rgba(18, 20, 24, 0.16); }
.menu-panel { position: fixed; z-index: 5; top: 0; right: 0; bottom: 0; width: min(360px, calc(100vw - 48px)); padding: 30px; background: #fff; box-shadow: -18px 0 50px rgba(17, 22, 31, 0.10); transform: translateX(105%); transition: transform 220ms ease; }
.menu-panel.open { transform: translateX(0); }
.menu-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 30px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 600; }
.menu-head > span { flex: 1; }
.menu-back { width: 30px; margin-left: -10px; color: #6c7077; font-size: 30px; line-height: 1; }
.menu-close { width: 30px; height: 30px; color: #6c7077; font-size: 28px; line-height: 1; }
.menu-level[hidden] { display: none; }
.menu-item { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 21px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px; }
.menu-link { color: inherit; text-decoration: none; }
.menu-item:hover { color: #666b74; }
.menu-item span { color: #a5a8b0; font-size: 12px; }
.menu-note { position: absolute; right: 30px; bottom: 30px; left: 30px; margin: 0; color: #a5a8b0; font-size: 12px; }
.menu-primary { width: 100%; margin-top: 26px; padding: 13px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 14px; }
.modal-backdrop { position: fixed; z-index: 8; inset: 0; display: grid; padding: 20px; background: rgba(17, 19, 23, 0.25); place-items: center; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(420px, 100%); padding: 28px; border-radius: 8px; background: #fff; box-shadow: 0 20px 70px rgba(17, 22, 31, 0.18); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.modal h2 { margin: 0; font-size: 18px; }
.close-button { color: #80838a; font-size: 26px; line-height: 1; }
.modal label { display: block; margin: 0 0 15px; color: #656971; font-size: 12px; }
.modal input, .modal textarea { display: block; width: 100%; margin-top: 8px; padding: 10px 11px; border: 1px solid #e2e4e8; border-radius: 4px; color: var(--ink); font-size: 13px; outline: none; resize: vertical; }
.modal input:focus, .modal textarea:focus { border-color: #8f939c; }
.save-profile { width: 100%; padding: 12px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 14px; }
.modal-copy { margin: -7px 0 19px; color: #858991; font-size: 12px; line-height: 1.7; }
.upload-zone { display: grid; min-height: 138px; margin: 0 0 16px; padding: 19px; border: 1px dashed #cfd2d9; border-radius: 6px; color: #5a5e66; text-align: center; place-items: center; }
.upload-zone:hover { border-color: #858991; background: #fafafa; }
.upload-zone small { color: #a1a4ac; font-size: 11px; }
.upload-symbol { color: var(--ink); font-size: 28px; font-weight: 300; line-height: 1; }
.image-previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0 0 17px; }
.image-preview { position: relative; height: 105px; overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: #f4f5f7; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-preview span { position: absolute; right: 6px; bottom: 6px; padding: 3px 5px; border-radius: 3px; background: rgba(255,255,255,.88); color: #535760; font-size: 10px; }
.memory-editor { max-height: 248px; margin-bottom: 15px; overflow: auto; }
.memory-edit-item { display: flex; gap: 12px; align-items: center; padding: 11px 0 11px 12px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.45; }
.memory-edit-item span { flex: 1; }
.memory-edit-item button { width: 28px; color: #9fa2aa; font-size: 21px; }
.memory-add { display: flex; margin-bottom: 14px; border: 1px solid #e2e4e8; border-radius: 4px; }
.memory-add input { width: 100%; padding: 10px 11px; border: 0; outline: 0; font-size: 13px; }
.memory-add button { width: 42px; flex: none; border-left: 1px solid #e2e4e8; color: #4d5159; font-size: 22px; }
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@keyframes character-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.008, 1.014); }
}
@keyframes ambient-drift {
  0% { background-position: 0% 45%, 0 0; }
  100% { background-position: 100% 55%, 36px 0; }
}
@keyframes shadow-breathe {
  0%, 100% { opacity: .62; transform: scaleX(.94); }
  50% { opacity: .38; transform: scaleX(1.08); }
}
@keyframes character-blink {
  0%, 44%, 47%, 100% { background: rgba(27, 29, 34, 0); transform: scaleY(0); }
  45%, 46% { background: rgba(27, 29, 34, 0.76); transform: scaleY(1); }
}
@keyframes character-respond {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-13px) scale(1.018, .986); }
  65% { transform: translateY(2px) scale(.994, 1.008); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes talking-sway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  35% { transform: rotate(.35deg) translateY(-2px); }
  70% { transform: rotate(-.25deg) translateY(1px); }
}
@keyframes character-surprised {
  0%, 100% { transform: translateY(0) scale(1); }
  28% { transform: translateY(-9px) scale(1.025); }
  52% { transform: translateY(1px) scale(.998); }
  74% { transform: translateY(-3px) scale(1.012); }
}
@media (max-width: 700px) {
  .site-header { height: 72px; padding: env(safe-area-inset-top) 21px 0; }
  .brand { gap: 11px; font-size: 15px; }
  .character-figure { width: min(74vw, 390px); height: min(68vh, 610px); margin-top: 1vh; }
  .character-figure::after { bottom: 16%; width: 85vw; }
  .stage-arrow { top: auto; bottom: calc(42px + env(safe-area-inset-bottom)); width: 37px; height: 37px; font-size: 28px; }
  .previous { left: 20px; }.next { right: 20px; }
  .start-hint { bottom: calc(100px + env(safe-area-inset-bottom)); font-size: 12px; }
  .stage-character-label { bottom: calc(142px + env(safe-area-inset-bottom)); }
  .chat-portrait { top: 48px; bottom: 252px; }
  .chat-portrait .motion-portrait { width: 128vw; min-width: 0; max-height: none; }
  .chat-portrait img { max-height: none; }
  .chat-sheet { width: calc(100vw - 20px); min-height: 248px; margin-bottom: calc(10px + env(safe-area-inset-bottom)); padding: 20px 14px 14px; }
  .chat-intro { gap: 10px; }
  .message-list { max-height: 116px; margin-top: 14px; }
  .message { max-width: 86%; }
  .composer { min-height: 56px; padding-left: 14px; }
  .composer textarea { font-size: 16px; }
  .send-button { width: 38px; height: 38px; }
  .composer-meta { margin-left: 4px; margin-right: 4px; }
  .menu-panel { width: min(360px, calc(100vw - 28px)); padding: 25px 21px calc(25px + env(safe-area-inset-bottom)); }
}