:root {
  color-scheme: light;
  --page: #f0f0f0;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --surface-3: #ededed;
  --text: #191919;
  --muted: #888888;
  --line: #dddddd;
  --accent: #07c160;
  --accent-strong: #06ad56;
  --accent-text: #ffffff;
  --bubble-user: #95ec69;
  --bubble-user-text: #111111;
  --bubble-her: #ffffff;
  --danger: #fa5151;
  --shadow: rgba(0, 0, 0, .08);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--page); min-width: 320px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 78px minmax(0, 900px); justify-content: center; }
.desktop-rail { background: #2e2e2e; color: #ededed; display: flex; flex-direction: column; align-items: center; padding: 24px 10px; gap: 26px; }
.desktop-rail nav { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.brand-mark { width: 44px; height: 44px; border: 0; border-radius: 5px; background: #07c160; color: white; font-weight: 500; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.rail-action { border: 0; background: transparent; color: #a99a92; width: 56px; padding: 12px 4px; border-radius: 14px; }
.rail-action span { font-size: 12px; }
.rail-action:hover, .rail-action.is-active { background: rgba(255,255,255,.09); color: #fff; }
.main-stage { background: var(--surface); min-height: 100vh; box-shadow: 0 0 36px var(--shadow); position: relative; overflow: hidden; }
.view { display: none; min-height: 100vh; }
.view.is-active { display: flex; flex-direction: column; }
.chat-header, .simple-header { height: 76px; flex: 0 0 auto; padding: 12px 22px; border-bottom: 1px solid #d8d8d8; display: flex; align-items: center; gap: 12px; background: #ededed; }
.simple-header { justify-content: space-between; height: 86px; }
.simple-header h2, .chat-header h1 { margin: 0; font-size: 19px; font-weight: 500; }
.preview-actions { display:flex;gap:8px; }
.eyebrow { margin: 0 0 3px; color: #737373; font-size: 12px; letter-spacing: .08em; }
.chat-identity { min-width: 0; flex: 1; }
.chat-identity p { margin: 3px 0 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-button, .icon-button, .composer-tool { border: 0; background: transparent; padding: 0; }
.mini-avatar { display: block; width: 44px; height: 44px; border-radius: 5px; position: relative; overflow: hidden; background: #d8d3cf url('/assets/renders/zhixia-chat-avatar-v2.png') center/cover no-repeat; }
.header-actions { display: flex; gap: 7px; }
.icon-button { width: 38px; height: 38px; border-radius: 5px; background: transparent; color: #181818; font-size: 20px; }
.call-button svg { width:23px;height:23px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.demo-notice { margin: 12px 18px 0; padding: 9px 12px; border-radius: 11px; color: var(--muted); background: var(--surface-2); font-size: 12px; }
.message-list { flex: 1; overflow-y: auto; padding: 24px 18px 12px; scroll-behavior: smooth; background: #f5f5f5; }
.message-row { display: flex; margin: 0 0 22px; gap: 11px; align-items: flex-start; }
.message-row.user { flex-direction: row-reverse; }
.message-avatar { width: 40px; height: 40px; border-radius: 4px; flex: 0 0 auto; background: #a97d6b; color: #fff; display: grid; place-items: center; font-size: 13px; }
.message-row.assistant .message-avatar { background: #d8d3cf url('/assets/renders/zhixia-chat-avatar-v2.png') center/cover no-repeat; color:transparent; font-size:0; }
.message-row.user .message-avatar { background: #576b95; color: #fff; }
.message-content { max-width: min(72%, 520px); }
.bubble { position:relative; padding: 10px 13px; border: 1px solid #e7e7e7; border-radius: 5px; background: var(--bubble-her); box-shadow: 0 1px 1px rgba(0,0,0,.03); white-space: pre-wrap; word-break: break-word; line-height: 1.55; font-size: 15px; }
.assistant .bubble::before { content:""; position:absolute; left:-7px; top:13px; width:12px; height:12px; background:#fff; border-left:1px solid #e7e7e7; border-bottom:1px solid #e7e7e7; transform:rotate(45deg); }
.user .bubble { background: var(--bubble-user); color: var(--bubble-user-text); border-color:#8cde62; border-radius:5px; }
.user .bubble::after { content:""; position:absolute; right:-7px; top:13px; width:12px; height:12px; background:#95ec69; border-right:1px solid #8cde62; border-top:1px solid #8cde62; transform:rotate(45deg); }
.message-time { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.user .message-time { text-align: right; }
.message-meta { display:flex; align-items:center; gap:7px; margin-top:5px; }
.user .message-meta { justify-content:flex-end; }
.message-meta .message-time { margin-top:0; }
.voice-bubble { min-width:126px; display:flex; align-items:center; justify-content:space-between; gap:22px; color:#222; cursor:pointer; }
.image-bubble { display:block;width:min(280px,58vw);padding:0;border:0;border-radius:6px;overflow:hidden;background:#ddd;box-shadow:0 1px 3px rgba(0,0,0,.14);cursor:pointer; }
.image-bubble img { display:block;width:100%;height:auto;max-height:420px;object-fit:cover; }
.voice-waves { display:flex; align-items:center; gap:2px; height:18px; }
.voice-waves i { display:block; width:3px; border-radius:3px; background:#333; height:6px; }
.voice-waves i:nth-child(2){height:12px}.voice-waves i:nth-child(3){height:17px}.voice-waves i:nth-child(4){height:10px}
.is-speaking .voice-waves i { animation:voice-wave .72s ease-in-out infinite alternate; }
.is-speaking .voice-waves i:nth-child(2){animation-delay:.12s}.is-speaking .voice-waves i:nth-child(3){animation-delay:.24s}.is-speaking .voice-waves i:nth-child(4){animation-delay:.36s}
@keyframes voice-wave { to { transform:scaleY(.45); opacity:.55; } }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.typing-indicator { padding: 0 58px 8px; color: var(--muted); display: flex; align-items: center; gap: 4px; font-size: 11px; }
.typing-indicator[hidden] { display: none; }
.typing-indicator span { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: typing 1.1s infinite ease-in-out; }
.typing-indicator span:nth-child(2) { animation-delay: .16s; }.typing-indicator span:nth-child(3) { animation-delay: .32s; }
.typing-indicator em { font-style: normal; margin-left: 5px; }
@keyframes typing { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.composer { flex: 0 0 auto; padding: 10px 14px 13px; border-top: 1px solid #d9d9d9; display: flex; align-items: flex-end; gap: 10px; background: #f7f7f7; }
.composer textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; border: 1px solid #dedede; border-radius: 5px; padding: 10px 12px; background: #ffffff; outline: none; }
.composer textarea:focus { border-color: var(--accent); }
.composer-tool { width: 42px; height: 42px; border-radius: 50%; background: transparent; color: #222; font-size: 24px; border:1.5px solid #333; }
.composer-tool.is-recording { color:#fff; background:#ba4d58; animation:recording-pulse 1.1s ease-in-out infinite; }
.icon-button.is-active { color:var(--accent); background:#dff7e9; }
@keyframes recording-pulse { 50% { transform:scale(.92); box-shadow:0 0 0 7px rgba(186,77,88,.14); } }
.send-button, .primary-button, .save-settings { border: 0; border-radius: 5px; background: var(--accent); color: var(--accent-text); padding: 11px 18px; min-height: 42px; }
.send-button:disabled { opacity: .5; cursor: wait; }
.soft-button { border: 1px solid var(--line); background: var(--surface-2); padding: 8px 12px; border-radius: 11px; }

.companion-space { min-height: 540px; margin: 18px; border-radius: 24px; position: relative; overflow: hidden; background: linear-gradient(180deg, light-dark(#cdb8ac, #372a25), light-dark(#9c7a68, #1e1715)); box-shadow: inset 0 0 80px rgba(0,0,0,.18); perspective: 900px; }
.room-light { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .48; }
.light-one { width: 220px; height: 220px; background: #f6c998; right: -40px; top: 80px; }
.light-two { width: 180px; height: 180px; background: #8d6e82; left: -30px; bottom: 50px; }
.window-scene { position: absolute; width: 180px; height: 230px; right: 38px; top: 36px; border: 10px solid rgba(68,45,37,.5); background: linear-gradient(#242837, #756070); overflow: hidden; }
.window-scene::before, .window-scene::after { content:""; position: absolute; background: rgba(77,48,38,.65); z-index: 2; }
.window-scene::before { width: 6px; height: 100%; left: 50%; }.window-scene::after { height: 6px; width: 100%; top: 53%; }
.moon { width: 38px; height: 38px; border-radius: 50%; background: #f5dbc0; box-shadow: 0 0 28px #f5dbc0; position: absolute; right: 20px; top: 24px; }
.window-scene i { position: absolute; bottom: 0; width: 35px; background: #171a24; height: 54px; }.window-scene i:nth-of-type(2){left:55px;height:82px;width:47px}.window-scene i:nth-of-type(3){right:0;height:66px;width:54px}
.shelf { position: absolute; left: 30px; top: 90px; width: 150px; height: 10px; background: rgba(65,42,34,.65); box-shadow: 0 70px 0 rgba(65,42,34,.65); }
.shelf span { position: absolute; top: -42px; width: 18px; height: 42px; background: #6f5a52; border-radius: 3px 3px 0 0; }.shelf span:nth-child(1){left:9px}.shelf span:nth-child(2){left:30px;height:34px;top:-34px;background:#8b6254}.shelf span:nth-child(3){left:55px;width:25px;background:#4f5b5a}.shelf span:nth-child(4){left:112px;height:28px;top:-28px;background:#aa8873}
.avatar-stage { position: absolute; inset: 18px 0 0; display: flex; align-items: flex-end; justify-content: center; transform-style: preserve-3d; }
.avatar-stage canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; z-index:3; }
.model-loading { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; display:grid; justify-items:center; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5); transition:.25s; }
.model-loading[hidden] { display:none; opacity:0; pointer-events:none; }
.model-loading span { width:32px; height:32px; border:3px solid rgba(255,255,255,.28); border-top-color:#fff; border-radius:50%; animation:modelSpin .85s linear infinite; margin-bottom:10px; }
.model-loading strong,.model-loading small{display:block}.model-loading small{opacity:.65;margin-top:4px;font-size:11px}
.outfit-switcher { position:absolute; left:20px; top:18px; display:flex; gap:7px; z-index:8; padding:6px; border-radius:15px; background:rgba(31,20,17,.46); backdrop-filter:blur(10px); }
.outfit-switcher button { border:0; color:rgba(255,255,255,.72); background:transparent; border-radius:10px; padding:7px 9px; font-size:11px; }
.outfit-switcher button span { display:block; font-size:9px; opacity:.55; }
.outfit-switcher button.is-selected { background:rgba(255,255,255,.16); color:#fff; }
.outfit-switcher.single-outfit button { min-width:116px; opacity:1; }
@keyframes modelSpin { to{transform:rotate(360deg)} }
.avatar-placeholder { width: 265px; height: 470px; position: relative; transform-origin: bottom center; animation: breathe 4.5s ease-in-out infinite; filter: drop-shadow(0 22px 24px rgba(28,17,14,.32)); }
.hair-back { position: absolute; width: 206px; height: 355px; left: 30px; top: 20px; border-radius: 48% 48% 30% 30%; background: linear-gradient(90deg,#171313,#382c29 48%,#171313); }
.neck { position: absolute; width: 53px; height: 75px; background: #d9a78e; left: 106px; top: 188px; border-radius: 14px; }
.body-shape { position: absolute; width: 245px; height: 246px; left: 10px; bottom: 0; border-radius: 46% 46% 16px 16px; background: linear-gradient(90deg,#7c554b,#b8816e 50%,#745047); overflow: hidden; }
.body-shape::before { content:""; position:absolute; width:100px; height:120px; border-radius:50%; background:rgba(255,255,255,.07); left:78px; top:-45px; }
.knit-line { position:absolute; inset:0; opacity:.16; background:repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.4) 9px 10px); }
.face { position: absolute; width: 152px; height: 190px; left: 57px; top: 40px; border-radius: 47% 47% 44% 44%; background: radial-gradient(circle at 60% 35%,#efd0ba,#dba991 70%); z-index: 3; }
.hair-fringe { position:absolute; top:-12px; height:72px; width:88px; background:#221a18; z-index:4; }
.hair-left { left:-9px; border-radius:80% 20% 70% 20%; transform:rotate(-8deg); }.hair-right{right:-7px;border-radius:20% 80% 20% 70%;transform:rotate(8deg)}
.hair-side { position:absolute; top:50px; width:42px; height:285px; z-index:5; background:linear-gradient(#211918,#352825,#171313); border-radius:60% 35% 70% 40%; }.side-left{left:31px;transform:rotate(3deg);transform-origin:top}.side-right{right:30px;transform:rotate(-3deg);transform-origin:top}
.eye { position:absolute; top:92px; width:31px; height:12px; border-radius:50%; background:#f8eee8; overflow:hidden; z-index:6; animation:blink 5.8s infinite; }.eye-left{left:28px}.eye-right{right:28px}.eye span{display:block;width:12px;height:12px;border-radius:50%;background:#3b2924;margin:auto;box-shadow:inset 0 0 0 3px #5d4940}.eye span::after{content:"";display:block;width:3px;height:3px;border-radius:50%;background:#fff;margin:2px 0 0 3px}
.brow { position:absolute; top:78px; width:34px; height:3px; background:#543b34; border-radius:50%; z-index:6; }.brow-left{left:26px;transform:rotate(-4deg)}.brow-right{right:26px;transform:rotate(4deg)}
.nose { position:absolute; top:112px; left:74px; width:7px; height:19px; border-right:2px solid rgba(117,72,58,.35); border-radius:50%; }
.mouth { position:absolute; top:147px; left:62px; width:29px; height:8px; border-bottom:3px solid #9c5f5e; border-radius:50%; transition:.25s; }
.avatar-shadow { position:absolute; width:290px; height:35px; bottom:5px; border-radius:50%; background:rgba(31,18,14,.35); filter:blur(9px); }
.prototype-silhouette { opacity:.88; filter:blur(.35px) drop-shadow(0 22px 24px rgba(28,17,14,.32)); }
.prototype-silhouette .face { background:linear-gradient(145deg,rgba(229,193,171,.64),rgba(139,98,83,.72)); box-shadow:inset 12px 5px 30px rgba(255,231,214,.18); }
.prototype-silhouette .eye,.prototype-silhouette .brow,.prototype-silhouette .nose,.prototype-silhouette .mouth { opacity:0; }
.prototype-silhouette .hair-back,.prototype-silhouette .hair-side,.prototype-silhouette .hair-fringe { background:linear-gradient(90deg,#171414,#352b29 48%,#171414); }
.prototype-silhouette::after { content:"形象制作中"; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); z-index:8; color:rgba(255,244,237,.82); letter-spacing:.22em; font-size:12px; white-space:nowrap; text-shadow:0 2px 12px rgba(35,22,18,.8); }
@keyframes breathe { 0%,100%{transform:translateY(0) rotateY(-1deg)}50%{transform:translateY(-5px) rotateY(1deg)} }
@keyframes blink { 0%,45%,49%,100%{transform:scaleY(1)}47%,48%{transform:scaleY(.08)} }
.companion-space[data-mood="happy"] .mouth { height:15px; border-bottom-width:4px; }.companion-space[data-mood="happy"] .brow{top:76px}.companion-space[data-mood="happy"] .prototype-silhouette{filter:blur(.2px) brightness(1.08) drop-shadow(0 22px 24px rgba(28,17,14,.32))}
.companion-space[data-mood="shy"] .face::after { content:""; position:absolute; left:18px; right:18px; top:125px; height:14px; background:radial-gradient(circle,#d98781 0 18%,transparent 58%); opacity:.28; }
.companion-space[data-mood="concerned"] .brow-left{transform:rotate(7deg)}.companion-space[data-mood="concerned"] .brow-right{transform:rotate(-7deg)}
.space-caption { position:absolute; left:20px; bottom:18px; right:20px; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:15px; background:rgba(26,18,16,.66); color:#fff; backdrop-filter:blur(12px); z-index:10; }
.space-caption strong,.space-caption small{display:block}.space-caption small{opacity:.65;margin-top:3px}.live-dot{width:8px;height:8px;border-radius:50%;background:#8bd1a4;box-shadow:0 0 10px #8bd1a4}
.mood-controls, .quality-row { display:flex; gap:8px; flex-wrap:wrap; padding:0 18px 18px; }
.mood-controls button, .quality-row button { border:1px solid var(--line); background:transparent; padding:8px 12px; border-radius:12px; }
.mood-controls button.is-selected, .quality-row button.is-selected { background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.quality-row { justify-content:space-between; align-items:center; color:var(--muted); font-size:13px; }.quality-row div{display:flex;gap:7px;flex-wrap:wrap}

.life-hero { margin: 20px; padding: 24px; border-radius: 22px; background: linear-gradient(135deg,var(--surface-2),var(--surface-3)); display:flex; align-items:center; gap:18px; }
.life-orb { width:82px;height:82px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd6b2,#956652 55%,#33241f);box-shadow:0 12px 35px var(--shadow)}
.life-hero span,.life-hero p{color:var(--muted);font-size:13px}.life-hero h3{margin:5px 0;font-weight:500}.life-hero p{margin:0}
.moment-feed { padding:0 20px 30px; display:grid; gap:14px; }
.moment { padding:18px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:70px 1fr; gap:14px; }
.moment-scene { height:70px;border-radius:16px;background:linear-gradient(145deg,#b98c73,#4d3c38);display:grid;place-items:center;color:#fff;font-size:22px}.moment time{color:var(--muted);font-size:11px}.moment p{margin:7px 0 5px;line-height:1.5}.moment small{color:var(--muted)}
.section-intro { margin: 20px 22px 8px; color:var(--muted); line-height:1.6; font-size:13px; }
.memory-list { padding:8px 22px 30px; display:grid; gap:10px; }
.memory-item { padding:14px 15px; border:1px solid var(--line); border-radius:15px; display:flex; gap:12px; align-items:center; background:var(--surface-2); }
.memory-category { color:var(--accent);font-size:11px;min-width:34px}.memory-item p{margin:0;flex:1;font-size:13px;line-height:1.5}.memory-item button{border:0;background:transparent;color:var(--muted)}
.empty-state { text-align:center;color:var(--muted);padding:70px 20px}.empty-state div{font-size:42px}.empty-state h3{color:var(--text);font-weight:500}
.settings-grid { padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-card{background:var(--surface-2);padding:18px;border-radius:18px}.settings-card h3{margin:0 0 16px;font-size:15px;font-weight:500}.settings-card label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0;color:var(--muted);font-size:12px}.settings-card input,.settings-card select,.settings-card textarea{max-width:180px;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:7px 9px}.settings-card textarea{width:180px;min-height:64px;resize:vertical}.settings-card p{color:var(--muted);font-size:11px;line-height:1.55;margin:14px 0 0}.split-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.split-fields label{display:block}.split-fields input{display:block;width:100%;margin-top:5px}.cost-value{display:flex;align-items:baseline;gap:9px}.cost-value strong{font-size:28px;font-weight:500}.cost-value span{font-size:11px;color:var(--muted)}.budget-track{height:8px;border-radius:9px;background:var(--surface-3);overflow:hidden;margin:13px 0}.budget-track i{display:block;width:0;height:100%;background:var(--accent);transition:.3s}.model-state{display:flex;align-items:center;gap:11px}.model-state>span{width:9px;height:9px;border-radius:50%;background:#6fbd8b}.model-state strong,.model-state small{display:block}.model-state small{color:var(--muted);margin-top:3px}.danger{color:var(--danger)}.save-settings{margin:0 20px 30px;align-self:flex-start}
dialog { border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:20px;padding:0;box-shadow:0 24px 80px rgba(0,0,0,.35);width:min(460px,calc(100% - 32px))}dialog::backdrop{background:rgba(16,10,8,.6);backdrop-filter:blur(4px)}dialog form{padding:22px}dialog h3{margin:0 0 18px}dialog label{display:block;color:var(--muted);font-size:12px;margin:12px 0}dialog textarea,dialog select{display:block;width:100%;margin-top:6px;border:1px solid var(--line);background:var(--surface-2);border-radius:11px;padding:10px}dialog textarea{min-height:90px;resize:vertical}.check-row{display:flex!important;align-items:center;gap:8px}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}.toast{position:absolute;left:50%;bottom:84px;transform:translate(-50%,12px);padding:9px 14px;border-radius:12px;background:light-dark(#30241f,#f1e4dc);color:light-dark(#fff,#2b211d);opacity:0;pointer-events:none;transition:.25s;z-index:30;font-size:12px;box-shadow:0 8px 28px var(--shadow)}.toast.show{opacity:1;transform:translate(-50%,0)}
.mobile-tabs { display:none; }

.call-screen { position:absolute;inset:0;z-index:100;display:flex;flex-direction:column;overflow:hidden;color:#fff;background:#1b1c1d;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s; }
.call-screen.is-open { opacity:1;visibility:visible;pointer-events:auto; }
.video-portrait { display:none;position:absolute;inset:0;background:transparent url('/assets/renders/zhixia-video-call-v3.png') center center/contain no-repeat;transform:scale(1.004);animation:video-breathe 7s ease-in-out infinite alternate;will-change:transform; }
.video-portrait .motion-video { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:transparent;opacity:0;transition:opacity .48s ease; }
.video-portrait .motion-video.is-active { opacity:1; }
.video-light { position:absolute;inset:0;background:radial-gradient(circle at 52% 35%,rgba(255,226,198,.09),transparent 28%),linear-gradient(180deg,rgba(0,0,0,.08) 45%,rgba(0,0,0,.56) 100%);transition:background .5s ease; }
.call-screen.is-video .video-portrait { display:block; }
.call-screen.is-video .call-ambient { display:block;background:linear-gradient(rgba(20,17,15,.34),rgba(15,13,12,.55)),url('/assets/renders/zhixia-video-call-v3.png') center/cover no-repeat;filter:blur(28px) saturate(.72);transform:scale(1.14); }
.call-screen.is-video::after { background:linear-gradient(180deg,rgba(0,0,0,.22),transparent 22%,transparent 55%,rgba(0,0,0,.55)); }
.call-screen.is-video .call-person { margin-top:auto; }
.call-screen.is-video .call-avatar { display:none; }
.call-screen.is-video .call-person h2 { margin:0 0 5px;font-size:22px;text-shadow:0 2px 12px rgba(0,0,0,.4); }
.call-screen.is-video .call-person p,.call-screen.is-video .call-person time { text-shadow:0 2px 10px rgba(0,0,0,.5); }
.call-screen.is-video .call-caption { margin:16px auto 10px;min-height:42px;color:rgba(255,255,255,.9);text-shadow:0 2px 10px rgba(0,0,0,.65); }
.call-screen.is-video.is-speaking .video-portrait { animation:video-speaking 2.2s ease-in-out infinite alternate; }
.call-screen.is-video.is-speaking .video-light { background:radial-gradient(circle at 52% 35%,rgba(255,226,198,.16),transparent 31%),linear-gradient(180deg,rgba(0,0,0,.04) 45%,rgba(0,0,0,.52) 100%); }
.call-screen.is-video.is-listening .video-portrait,.call-screen.is-video.motion-listen .video-portrait { animation:video-listen 2.8s ease-in-out infinite alternate; }
.call-screen.is-video.motion-think .video-portrait { animation:video-think 2.1s ease-in-out both; }
.call-screen.is-video.motion-near .video-portrait { animation:video-near 3.2s ease-in-out both; }
.call-screen.is-video.motion-drift .video-portrait { animation:video-drift 3.1s ease-in-out both; }
.call-screen.is-video.motion-nod .video-portrait { animation:video-nod 2.7s ease-in-out both; }
.call-screen.is-video.motion-settle .video-portrait { animation:video-settle 3.2s ease-in-out both; }
.call-screen.is-video.motion-sway .video-portrait { animation:video-sway 3.2s ease-in-out both; }
.call-screen.is-video.motion-glance .video-portrait { animation:video-glance 2.8s ease-in-out both; }
.call-screen.is-video.motion-speaking .video-portrait { animation:video-speaking 2.2s ease-in-out infinite alternate; }
@keyframes video-breathe { from{transform:scale(1.004) translateY(0)}to{transform:scale(1.014) translateY(-.18%)} }
@keyframes video-speaking { from{transform:scale(1.008) translate(-.08%,-.08%)}to{transform:scale(1.018) translate(.08%,-.22%)} }
@keyframes video-listen { from{transform:scale(1.008) translateY(0)}to{transform:scale(1.022) translateY(.18%)} }
@keyframes video-think { 0%{transform:scale(1.01) translateX(0)}45%{transform:scale(1.014) translateX(-.22%)}100%{transform:scale(1.008) translateX(0)} }
@keyframes video-near { 0%,100%{transform:scale(1.008)}50%{transform:scale(1.025) translateY(-.16%)} }
@keyframes video-drift { 0%,100%{transform:scale(1.008) translateX(0)}48%{transform:scale(1.014) translateX(.18%)} }
@keyframes video-nod { 0%,100%{transform:scale(1.008) translateY(0)}35%{transform:scale(1.013) translateY(.32%)}62%{transform:scale(1.01) translateY(.06%)} }
@keyframes video-settle { 0%,100%{transform:scale(1.008) translate(0,0)}45%{transform:scale(1.014) translate(-.16%,.2%)} }
@keyframes video-sway { 0%,100%{transform:scale(1.008) translateX(0)}40%{transform:scale(1.014) translateX(-.2%)}70%{transform:scale(1.012) translateX(.14%)} }
@keyframes video-glance { 0%,100%{transform:scale(1.008) translateX(0)}48%{transform:scale(1.016) translateX(.24%)} }
.call-screen.is-preview #call-mute,.call-screen.is-preview #call-speaker { opacity:.38;pointer-events:none; }
.call-ambient { position:absolute;inset:-35px;background:linear-gradient(rgba(24,25,26,.67),rgba(18,19,20,.88)),url('/assets/renders/zhixia-avatar-reference.png') center 18%/cover no-repeat;filter:blur(22px) saturate(.72);transform:scale(1.13); }
.call-screen::after { content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 32%,rgba(255,255,255,.08),transparent 36%),linear-gradient(transparent 55%,rgba(0,0,0,.22));pointer-events:none; }
.call-topbar { position:relative;z-index:2;display:flex;justify-content:space-between;padding:20px 24px;font-size:12px;color:rgba(255,255,255,.68); }
.call-person { position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:max(38px,6vh); }
.call-avatar { position:relative;width:132px;height:132px;border-radius:10px;background:#d8d3cf url('/assets/renders/zhixia-avatar-reference.png') center 19%/116% auto no-repeat;box-shadow:0 18px 50px rgba(0,0,0,.33); }
.call-pulse { position:absolute;inset:-8px;border:2px solid rgba(255,255,255,.25);border-radius:15px;opacity:0; }
.call-screen.is-speaking .call-pulse { animation:call-pulse 1.4s ease-out infinite; }
@keyframes call-pulse { 0%{opacity:.8;transform:scale(.96)}100%{opacity:0;transform:scale(1.18)} }
.call-person h2 { margin:24px 0 7px;font-size:25px;font-weight:500;letter-spacing:.03em; }
.call-person p { margin:0;color:rgba(255,255,255,.72);font-size:14px;min-height:22px; }
.call-person time { margin-top:8px;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums;font-size:14px; }
.call-caption { position:relative;z-index:2;width:min(560px,calc(100% - 44px));min-height:48px;margin:auto auto 22px;padding:10px 14px;text-align:center;color:rgba(255,255,255,.72);font-size:13px;line-height:1.55; }
.call-controls { position:relative;z-index:2;display:flex;justify-content:center;gap:clamp(28px,8vw,78px);padding:0 20px max(45px,calc(28px + env(safe-area-inset-bottom))); }
.call-controls button { border:0;background:transparent;color:#fff;display:flex;flex-direction:column;align-items:center;gap:9px;min-width:62px; }
.call-controls em { font-style:normal;font-size:12px;color:rgba(255,255,255,.8); }
.call-control-icon { display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.17);backdrop-filter:blur(10px);font-size:24px;transition:.18s; }
.call-control-icon svg { width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.call-controls button[aria-pressed="true"] .call-control-icon { background:#fff;color:#202124; }
.call-controls .hangup .call-control-icon { background:#fa5151;color:#fff;font-size:29px;transform:rotate(135deg); }
.call-controls button:active .call-control-icon { transform:scale(.92); }
.call-controls .hangup:active .call-control-icon { transform:rotate(135deg) scale(.92); }
body.in-call { overflow:hidden; }

@media (max-width: 720px) {
  .app-shell { display:block; min-height:100dvh; }
  .desktop-rail { display:none; }
  .main-stage { min-height:100dvh; box-shadow:none; padding-bottom:66px; }
  .view { min-height:calc(100dvh - 66px); }
  .chat-header { height:68px;padding:9px 14px}.simple-header{height:76px;padding:10px 16px}
  .demo-notice{margin:8px 12px 0}.message-list{padding:16px 12px 8px}.message-content{max-width:78%}.composer{padding:10px 10px 12px}.composer-tool{display:flex;align-items:center;justify-content:center;flex:0 0 42px}.send-button{padding:10px 14px}
  .mobile-tabs { display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:66px;background:color-mix(in srgb,var(--surface) 96%,transparent);border-top:1px solid var(--line);z-index:25;padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(16px) }
  .mobile-tabs button { border:0;background:transparent;color:var(--muted);font-size:11px }.mobile-tabs button.is-active{color:var(--accent);font-weight:500}
  .companion-space { margin:12px;min-height:calc(100dvh - 242px);border-radius:20px}.window-scene{right:14px;transform:scale(.78);transform-origin:top right}.shelf{left:15px;transform:scale(.8);transform-origin:top left}.mood-controls,.quality-row{padding-left:12px;padding-right:12px}.quality-row{display:block}.quality-row>div{margin-top:8px}.quality-row button{font-size:11px;padding:7px 8px}.outfit-switcher{left:10px;top:10px}
  #view-companion .quality-row { padding-bottom: 78px; }
  .settings-grid{grid-template-columns:1fr;padding:12px}.save-settings{margin-left:12px}.life-hero{margin:12px;padding:18px}.moment-feed{padding:0 12px 20px}.moment{padding:16px 4px}.memory-list{padding:8px 12px 20px}.section-intro{margin:16px 14px 8px}
  .call-screen { position:fixed; }
  .video-portrait { inset:-2%;background-size:cover;transform:scale(1.012); }
  .video-portrait .motion-video { object-fit:cover; }
  .call-topbar { padding-top:max(18px,env(safe-area-inset-top)); }
  .call-person { margin-top:max(30px,7vh); }
  .call-avatar { width:118px;height:118px; }
}

@media (prefers-reduced-motion: reduce) { * { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important } }
.album-view{background:#f7f7f7;overflow-y:auto}.album-header{background:#fff}.album-summary{margin:18px 22px 8px;padding:18px 20px;border-radius:16px;background:#fff;display:flex;align-items:baseline;gap:7px}.album-summary strong{font-size:30px}.album-summary span{color:#666}.album-summary p{margin-left:auto;color:#999;font-size:13px}.album-filters{display:flex;gap:9px;padding:10px 22px 16px;overflow:auto}.album-filters button{border:0;border-radius:18px;background:#fff;padding:8px 17px;color:#666;white-space:nowrap}.album-filters button.is-selected{background:#111;color:#fff}.album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:0 4px 90px}.album-photo{position:relative;border:0;padding:0;background:#ddd;overflow:hidden;aspect-ratio:3/4;cursor:pointer}.album-photo-featured{grid-column:span 2;aspect-ratio:16/11}.album-photo img{width:100%;height:100%;object-fit:cover;display:block}.album-photo span{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 11px;color:#fff;text-align:left;font-size:13px;background:linear-gradient(transparent,rgba(0,0,0,.58))}.photo-lightbox{width:min(94vw,720px);max-width:none;border:0;border-radius:18px;padding:0;background:#111;color:#fff;overflow:hidden}.photo-lightbox::backdrop{background:rgba(0,0,0,.82)}.photo-lightbox img{display:block;width:100%;max-height:82vh;object-fit:contain}.photo-lightbox p{margin:0;padding:14px 18px}.lightbox-close{position:absolute;right:12px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:25px;z-index:2}@media(max-width:700px){.album-summary{margin:12px 12px 6px}.album-summary p{display:none}.album-filters{padding:8px 12px 12px}.album-grid{padding-bottom:78px}.photo-lightbox{width:100vw;height:100vh;border-radius:0}.photo-lightbox img{height:88vh;max-height:none}}