:root { --safe-top: max(env(safe-area-inset-top, 0px), var(--safe-top-fallback, 0px)); --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-bottom-fallback, 0px)); --character-accent: var(--accent); color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--text-primary); background: var(--neutral-bg); }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: var(--neutral-bg); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.character-phone { position: relative; width: min(100vw, calc(100vh * 393 / 852), 393px); aspect-ratio: 393 / 852; overflow: hidden; isolation: isolate; background: var(--neutral-surface); box-shadow: 0 24px 70px rgb(0 0 0 / 12%); }
.character-toolbar { position: absolute; inset: 0 0 auto; z-index: 4; height: calc(76px + var(--safe-top)); padding-top: var(--safe-top); display: flex; align-items: center; justify-content: center; border: 0; background: rgb(245 241 233 / 58%); backdrop-filter: blur(24px) saturate(1.35); -webkit-backdrop-filter: blur(24px) saturate(1.35); box-shadow: 0 8px 22px rgb(35 31 26 / 6%); }
.character-toolbar::after { content: ""; position: absolute; top: 100%; right: 0; left: 0; height: 78px; pointer-events: none; background: linear-gradient(to bottom, rgb(245 241 233 / 34%), rgb(245 241 233 / 12%) 34%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 100%); }
.character-toolbar h1 { margin: 0; font-size: 20px; }
.character-toolbar a { position: absolute; top: calc(var(--safe-top) + 33px); left: 24px; width: 30px; height: 40px; transform: translateY(-50%); color: var(--text-primary); font-family: Arial, sans-serif; font-size: 42px; line-height: 32px; text-align: center; text-decoration: none; }
.character-toolbar button { position: absolute; right: 20px; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; color: #fff; background: var(--accent); font-size: 14px; font-weight: 700; cursor: pointer; }
.character-tabs { position: absolute; top: calc(88px + var(--safe-top)); right: 18px; left: 18px; z-index: 3; height: 42px; padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgb(255 255 255 / 42%); border-radius: 999px; background: rgb(240 239 235 / 58%); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); box-shadow: 0 8px 24px rgb(35 31 26 / 7%); }
.character-tabs button { border: 0; border-radius: 6px; color: var(--text-secondary); background: transparent; font-size: 14px; font-weight: 700; cursor: pointer; }
.character-tabs button.active { color: var(--text-primary); background: rgb(250 248 243 / 86%); box-shadow: 0 2px 8px rgb(35 31 26 / 10%); }
.character-content { position: absolute; inset: calc(142px + var(--safe-top)) 0 0; overflow-y: auto; padding: 0 18px calc(32px + var(--safe-bottom)); scrollbar-width: none; }
.character-content::-webkit-scrollbar { display: none; }
.avatar-editor { min-height: 92px; display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 15px; padding-bottom: 18px; border-bottom: 1px solid var(--divider); }
.avatar-preview-wrap { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 8px; overflow: hidden; background: var(--neutral-bg); font-size: 38px; }
.avatar-preview-wrap img { width: 72px; height: 72px; border-radius: 8px; object-fit: cover; }
.avatar-editor div { display: grid; justify-items: start; gap: 9px; }
.avatar-editor button { height: 34px; padding: 0 12px; border: 0; border-radius: 8px; color: var(--text-primary); background: var(--neutral-bg); font-size: 13px; font-weight: 700; cursor: pointer; }
.settings-group, .memory-section { margin-top: 16px; padding: 18px; border: 1px solid color-mix(in srgb, var(--border), transparent 28%); border-radius: 18px; background: color-mix(in srgb, var(--neutral-surface-raised) 78%, transparent); box-shadow: 0 10px 28px rgb(35 31 26 / 5%); }
.settings-group:first-child { margin-top: 0; }
.character-content > section[data-panel="chat"], .character-content > section[data-panel="ability"] { padding: 2px 2px 18px; }
.character-content > section[data-panel="chat"] .setting-field, .character-content > section[data-panel="ability"] .setting-field { margin-top: 14px; }
.character-content > section[data-panel="chat"] .settings-divider, .character-content > section[data-panel="ability"] .settings-divider { margin: 20px 2px 4px; padding: 8px 10px; border: 0; border-radius: 10px; color: var(--accent-dark); background: var(--accent-tint); font-size: 12px; letter-spacing: .04em; }
.character-content > section[data-panel="chat"] .linked-setting, .character-content > section[data-panel="ability"] .linked-setting, .character-content > section[data-panel="profile"] .linked-setting { margin: 10px 0; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--border), transparent 28%); border-radius: 12px; background: color-mix(in srgb, var(--neutral-surface-raised) 62%, transparent); }
.group-heading { margin-bottom: 4px; }
.group-kicker { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 20px; margin-bottom: 8px; border-radius: 999px; color: var(--accent-dark); background: var(--accent-tint); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.group-heading h2 { margin: 0; font-size: 19px; letter-spacing: 0; }
.group-heading p { margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; }
.reference-card { margin-top: 18px; padding: 16px; border: 1px solid color-mix(in srgb, var(--border), transparent 25%); border-radius: 14px; background: color-mix(in srgb, var(--neutral-surface) 72%, transparent); }
.reference-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.reference-heading div { display: grid; gap: 4px; }
.reference-heading strong { font-size: 17px; }
.reference-heading small, .reference-hint { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.reference-heading button, .reference-actions button { height: 34px; padding: 0 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); background: var(--neutral-surface); font-size: 12px; font-weight: 700; }
.reference-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 14px; padding: 3px; border-radius: 8px; background: var(--neutral-bg); }
.reference-mode button { height: 34px; border: 0; border-radius: 6px; color: var(--text-secondary); background: transparent; font-size: 13px; font-weight: 700; }
.reference-mode button.active { color: var(--character-accent, var(--accent)); background: var(--neutral-surface-raised); box-shadow: 0 1px 4px rgb(0 0 0 / 10%); }
.reference-image-box { position: relative; min-height: 150px; margin-top: 12px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--border); border-radius: 10px; color: var(--text-tertiary); background: var(--neutral-surface); }
.reference-image-box img { width: 100%; height: 220px; object-fit: cover; }
.reference-image-box.has-image { border-style: solid; }
.reference-actions { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 7px; opacity: 0; transition: opacity 160ms ease; }
.reference-image-box:hover .reference-actions, .reference-image-box:focus-within .reference-actions, .reference-image-box.has-image .reference-actions { opacity: 1; }
.reference-actions button:last-child { color: #c93645; }
.reference-hint { margin: 10px 0 0; }
.reference-description { display: grid; gap: 7px; margin-top: 14px; color: var(--text-primary); font-size: 14px; font-weight: 700; }
.reference-description textarea { width: 100%; padding: 10px 11px; border: 1px solid var(--border); border-radius: 8px; outline: 0; resize: vertical; line-height: 1.5; }
.reference-description textarea:focus { border-color: var(--character-accent, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--character-accent, var(--accent)), transparent 88%); }
.setting-field { display: grid; gap: 8px; margin-top: 18px; }
.settings-divider { margin-top: 24px; padding-bottom: 8px; border-bottom: 1px solid var(--divider); color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.setting-field strong, .choice-group legend, .switch-row strong, .linked-setting strong { color: var(--text-primary); font-size: 15px; font-weight: 750; }
.setting-field input, .setting-field textarea, .setting-field select { width: 100%; border: 1px solid color-mix(in srgb, var(--border), transparent 18%); border-radius: 12px; outline: 0; color: var(--text-primary); background: color-mix(in srgb, var(--neutral-surface-raised) 84%, transparent); font-size: 16px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 42%); }
.setting-field input, .setting-field select { height: 44px; padding: 0 12px; }
.setting-field textarea { padding: 11px 12px; resize: vertical; line-height: 1.55; }
.setting-field input:focus, .setting-field textarea:focus, .setting-field select:focus { border-color: var(--text-secondary); box-shadow: 0 0 0 3px rgb(47 47 47 / 9%); }
.memory-section { margin-top: 25px; padding-top: 18px; border-top: 1px solid var(--divider); }
.memory-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.memory-heading div { display: grid; gap: 4px; }
.memory-heading strong { font-size: 17px; }
.memory-heading small, .memory-empty { color: var(--text-secondary); font-size: 12px; }
.memory-heading button { height: 36px; padding: 0 14px; border: 0; border-radius: 8px; color: #fff; background: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; }
.memory-switch { margin-top: 12px; padding: 12px 0; border-bottom: 0; }
.memory-list { display: grid; gap: 10px; }
.memory-card { padding: 13px; border: 1px solid var(--border); border-radius: 8px; background: var(--neutral-surface-raised); }
.memory-card.pinned { border-color: var(--accent-medium); background: var(--accent-tint); }
.memory-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary); font-size: 12px; }
.memory-card-top button, .memory-actions button { padding: 3px 7px; border: 0; color: var(--text-secondary); background: transparent; font-size: 12px; cursor: pointer; }
.memory-card p { margin: 10px 0; color: var(--text-primary); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.memory-actions { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--divider); padding-top: 8px; }
.memory-actions button:last-child { color: #c93645; }
.memory-empty { margin: 12px 0 0; text-align: center; }
.reality-person { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider); }
.reality-person .reference-hint { overflow-wrap: anywhere; }
.choice-group { margin: 18px 0 0; padding: 0; display: grid; gap: 9px; border: 0; }
.choice-group legend { margin-bottom: 8px; }
.choice-group label { min-height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--neutral-surface-raised); font-size: 14px; }
.choice-group input { accent-color: var(--accent); }
.switch-row { min-height: 64px; margin-top: 8px; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid color-mix(in srgb, var(--border), transparent 38%); border-radius: 12px; background: color-mix(in srgb, var(--neutral-surface-raised) 54%, transparent); }
.switch-row span { min-width: 0; display: grid; gap: 4px; }
.switch-row small, .linked-setting small { color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.switch-row input { position: relative; width: 43px; height: 24px; flex: 0 0 auto; appearance: none; border-radius: 12px; background: var(--border); cursor: pointer; transition: background 160ms ease; }
.switch-row input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 20%); transition: transform 160ms ease; }
.switch-row input:checked { background: var(--accent); }
.switch-row input:checked::after { transform: translateX(19px); }
.linked-setting { min-height: 68px; display: flex; align-items: center; justify-content: space-between; color: inherit; border-bottom: 1px solid var(--border); text-decoration: none; }
.linked-setting span { display: grid; gap: 4px; }
.linked-setting b { color: var(--text-tertiary); font-size: 30px; font-weight: 300; }
.entry-character-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; margin-top: 12px; padding: 8px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--neutral-surface); }
.entry-character-option { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-primary); background: var(--neutral-surface-raised); font-size: 13px; }
.entry-character-option input { width: auto; accent-color: var(--accent); }
.delete-character { width: 100%; height: 46px; margin-top: 25px; border: 1px solid #d94a58; border-radius: 8px; color: #c93645; background: var(--neutral-surface-raised); font-weight: 700; cursor: pointer; }
.chat-reset-button { width: 100%; height: 46px; margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); background: var(--neutral-surface-raised); font-weight: 700; cursor: pointer; }
#reset-chat-dialog { width: min(320px, calc(100vw - 40px)); border: 0; border-radius: 10px; padding: 0; box-shadow: 0 25px 70px rgb(0 0 0 / 25%); }
#reset-chat-dialog::backdrop { background: rgb(0 0 0 / 33%); }
#reset-chat-dialog form { padding: 20px; display: grid; gap: 10px; background: var(--neutral-surface-raised); }
#reset-chat-dialog h2 { margin: 0; font-size: 18px; color: var(--text-primary); }
#reset-chat-dialog p { margin: 0 0 6px; font-size: 13px; color: var(--text-secondary); }
#reset-chat-dialog button { height: 42px; border: 1px solid var(--border); border-radius: 8px; background: var(--neutral-surface); color: var(--text-primary); font-weight: 600; cursor: pointer; }
#reset-chat-dialog .is-danger { border-color: #d94a58; color: #c93645; }
.token-warning { margin: 16px 0 0; padding: 12px; border-left: 4px solid #d89322; border-radius: 7px; color: #765b2e; background: #fff7e6; font-size: 12px; line-height: 1.55; }
.save-toast { position: absolute; right: 50%; bottom: calc(20px + var(--safe-bottom)); z-index: 6; min-width: 100px; padding: 9px 14px; transform: translateX(50%); border-radius: 8px; color: #fff; background: rgb(30 30 30 / 90%); text-align: center; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.save-toast.show { opacity: 1; }
[hidden] { display: none !important; }
.theme-night .character-toolbar { background: rgb(33 31 29 / 60%); }
.theme-night .character-toolbar::after { background: linear-gradient(to bottom, rgb(33 31 29 / 38%), rgb(33 31 29 / 12%) 34%, transparent 100%); }
.theme-night .character-tabs { background: rgb(28 27 25 / 52%); border-color: rgb(255 255 255 / 12%); }
.theme-night .character-tabs button.active { background: rgb(39 37 31 / 86%); }
@media (max-width: 480px) { :root, body { background: var(--neutral-bg); } .character-phone { width: 100vw; height: 100vh; aspect-ratio: auto; box-shadow: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }