/* Functional controls; reference-specific A/B styling is applied separately. */
header{gap:12px;flex-wrap:wrap;height:auto;min-height:78px;padding-block:12px}
#model-open{margin-left:auto;max-width:min(58%,540px);font-size:12px;white-space:normal;text-align:left;border:1px solid #5f5061;border-radius:18px;padding:9px 13px;background:#29222c;color:#f6edf3}
#model-names{font-size:11px;border:0;background:transparent;color:#d8c5d3}
#model-dialog{width:min(520px,calc(100vw - 32px));padding:22px;border:1px solid #776273;background:#211e25;color:#f9f2f7;border-radius:20px;max-height:80dvh;overflow:auto}
#model-options{display:grid;gap:10px}#model-options button{padding:17px;text-align:left;background:#332b35;color:#fff;border:1px solid #605060;border-radius:13px}#model-options .active{border-color:#e48cc0;background:#513849}#model-options button:disabled{opacity:.5}#model-note{font-size:12px;color:#c7b9c4}
#chat-progress{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;margin:0 0 12px;color:#eee3ed;font-size:12px}#chat-progress[hidden]{display:none}.generation-track{grid-column:1/3;height:4px;overflow:hidden;background:#50444f;border-radius:8px}.generation-track span{display:block;width:30%;height:100%;background:#f098c3;animation:text-progress 1.5s ease-in-out infinite}#chat-cancel{grid-column:3;grid-row:1/3;background:#3b303b;color:#fff;border:1px solid #785970;border-radius:14px;padding:8px 15px}@keyframes text-progress{from{transform:translateX(-110%)}to{transform:translateX(450%)}}
@media(max-width:620px){header{gap:7px;padding:9px 12px}header h2{font-size:17px}#model-open{max-width:53%;font-size:10px;padding:7px}#model-names{margin-left:auto}#model-dialog{padding:16px}}
@media(prefers-reduced-motion:reduce){.generation-track span{animation:none;width:100%;opacity:.65}}
/* A: dark conversation overlay. B: light pink overlay. Both use the same crisp image. */
main{position:relative;isolation:isolate;padding:0;background:#28252b}
main::before{content:'';position:absolute;inset:0;z-index:-1;background-image:url('/character-background.png');background-repeat:no-repeat;background-position:center top;background-size:auto 100%;pointer-events:none}
header{height:64px;min-height:64px;padding:9px 22px;background:rgba(21,18,23,.94);border-bottom:1px solid #44383f;flex-wrap:nowrap;z-index:2}
header h2{font-weight:600;font-size:16px}.layout-toggle{display:flex;gap:3px;margin-left:auto;flex-shrink:0}.layout-toggle button,.legacy-history{background:#2c232c;color:#dfc8d9;border:1px solid #564451;border-radius:16px;padding:6px 9px;font-size:11px}.layout-toggle button[aria-pressed=true]{background:#cd355e;color:#fff;border-color:#cd355e}.legacy-history{padding:6px 8px}
.messages{padding:28px 24px 22px;background:transparent;scrollbar-color:#dc557b transparent;min-height:0}.message{max-width:78%;margin:20px 0}.message.assistant{max-width:calc(78% - 46px)}.message .bubble p{background:rgba(26,22,27,.94);color:#fff;border:1px solid #74636e;border-radius:17px;font-size:14px;line-height:1.8;padding:12px 16px;text-shadow:none}.message.assistant .bubble p{background:rgba(202,47,88,.96);border-color:#d9547c}.message.user .bubble p{background:rgba(27,24,30,.94);border-color:#61515e}.speaker{background:#251e29;color:#fff}.photo-request{background:#d4467b}.character-avatar{object-position:center 12%}.message-avatar{background:#e7e3e0}
footer{z-index:2;margin:0 14px 12px;padding:12px 14px 8px;border:1px solid #5e4a56;border-radius:20px;background:rgba(27,22,30,.97)}#composer{border:0;background:transparent;border-radius:0;padding:0 0 8px;align-items:center}#input{font-size:14px;color:#fff;padding:6px 2px}#input::placeholder{color:#c2acba}#send{border-radius:50%;background:#d54e85;color:#fff;width:38px;height:38px}#send:disabled{background:#64404f;color:#b996a5}.composer-controls{display:flex;align-items:center;gap:8px;min-width:0}#model-open{margin-left:0;max-width:calc(100% - 92px);background:#047eaf;color:white;border:0;border-radius:11px;font-weight:600;font-size:11px;padding:8px 11px}#model-names{font-size:10px;margin-left:auto;white-space:nowrap}#status{color:#ecdce7;font-size:10px;min-height:14px}

#model-dialog{background:#fff;color:#352455;border-color:#e6dfe9;border-radius:18px;padding:22px;box-shadow:0 18px 60px #24132644}#model-dialog .modal-heading{border-bottom:1px solid #eee7f0;padding-bottom:18px}#model-close{background:none;border:0;color:#95879d;font-size:24px}#model-options button{background:#fff;color:#392654;border-color:#e8e0ec;min-height:94px;font-size:14px;font-weight:600;line-height:1.7}#model-options button.active{background:#fff5f9;border-color:#f35199;box-shadow:inset 4px 0 #f35199}#model-note{color:#8d7d94;font-size:11px}.legacy-dialog{width:min(700px,calc(100vw - 28px))}.legacy-dialog p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.8}
@media(max-width:760px){.app{grid-template-columns:minmax(0,1fr);min-height:0}.sidebar{display:none}main::before{background-size:cover;background-position:center top}header{padding:8px 12px;height:60px;min-height:60px;gap:7px}header h2{font-size:15px}.legacy-history{font-size:9px;padding:6px}.layout-toggle button{font-size:10px;padding:6px 8px}.messages{padding:22px 12px 16px}.message{max-width:92%}.message.assistant{margin-left:36px;max-width:calc(94% - 36px)}.message-avatar{left:-36px;width:28px;height:28px}.message .bubble p{font-size:13px;padding:11px 13px}footer{margin:0 8px max(8px,env(safe-area-inset-bottom));padding:11px 12px 7px}#model-open{font-size:10px;max-width:calc(100% - 78px)}#model-names{font-size:9px}#input{font-size:16px}.photo-request{font-size:10px;padding:7px 9px}.message-actions{gap:8px}.message-actions .speaker{width:30px;height:30px}}
#prompt-open{font-size:10px;border:0;background:transparent;color:inherit;padding:5px;white-space:nowrap}.composer-controls{flex-wrap:wrap}#model-open{max-width:100%;flex:1 1 180px}#model-names{margin-left:0}#prompt-dialog{width:min(620px,calc(100vw - 24px))}#prompt-dialog h2{font-size:18px}#prompt-dialog p{font-size:12px;line-height:1.7}#system-editor{display:block;width:100%;border:1px solid #82738a;padding:12px;border-radius:10px;background:#29212e;color:#fff;height:240px;max-height:38dvh;font-size:13px}.legacy-dialog button{border-radius:10px;padding:8px 14px}
.message .bubble{background:none;border:0;padding:0;max-width:100%}.messages{padding-inline:max(24px,calc((100% - 600px)/2))}.message.assistant{max-width:calc(92% - 46px)}#model-open{flex:0 1 auto}#model-names{margin-left:auto}
@media(max-width:760px){.messages{padding-inline:12px}.message.assistant{max-width:calc(94% - 36px)}#model-open{max-width:calc(100% - 136px);font-size:9px;padding:8px}#model-names{font-size:9px}#prompt-open{font-size:9px}}
.new-conversation{background:transparent;color:inherit;border:1px solid #857085;border-radius:14px;padding:6px 9px;font-size:11px;flex-shrink:0}header .layout-toggle{margin-left:auto}header .legacy-history{flex-shrink:0}#messages #chat-progress{min-width:min(310px,60vw);padding:14px;border:1px solid #624657;border-radius:17px;background:#271e29;margin:0 0 8px;white-space:normal}#messages #chat-progress #chat-cancel{font-size:10px;padding:7px 10px}
@media(max-width:760px){.new-conversation{font-size:9px;padding:6px 7px}header h2{font-size:14px}header .avatar-edit{width:32px;height:32px}header{gap:6px}.legacy-history{padding:6px 7px}}

/* Independent background-only comparison; foreground UI stays crisp. */
main{overflow:hidden}
main::before{filter:none;transition:filter .18s ease}
body[data-background-blur=on] main::before{filter:blur(12px)}
.background-control{display:flex;align-items:center;gap:8px;width:fit-content;margin-top:9px;font-size:11px;color:#e7d7e2;cursor:pointer;user-select:none}
.background-control input{appearance:none;width:30px;height:18px;border:1px solid #a0899b;border-radius:20px;background:#55434f;position:relative;margin:0;cursor:pointer}
.background-control input:before{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .15s}
.background-control input:checked{background:#d7427a;border-color:#d7427a}.background-control input:checked:before{transform:translateX(12px)}
.background-control input:focus-visible{outline:2px solid #d883b0;outline-offset:3px}

@media(max-width:760px){.background-control{font-size:10px;margin-top:8px}}
@media(prefers-reduced-motion:reduce){main::before,.background-control input:before{transition:none}}

body[data-background-blur=on] main{background:#100d12}
body[data-background-blur=on] main::before{background-size:cover;filter:blur(24px);opacity:.42}


.character-scene{display:flex;align-items:center;justify-content:center;width:min(100%,450px);height:min(52dvh,500px);margin:0 auto 24px;border:1px solid #71616d;border-radius:18px;background:#dfdfdc;overflow:hidden;filter:none;flex-shrink:0}
.character-scene img{display:block;width:100%;height:100%;object-fit:contain;filter:none}

.message.assistant .bubble > p:empty{display:none}
@media(max-width:760px){.character-scene{width:100%;height:min(49dvh,420px);border-radius:15px;margin-bottom:20px}}

/* A/B is the single background selector; developer settings live in navigation. */
#status:empty{display:none}.composer-controls #model-open{max-width:100%;font-size:11px}#debug-open{margin-top:8px}#navigation-toggle{display:none}#prompt-dialog h3{font-size:14px}#prompt-dialog{max-height:85dvh;overflow:auto}
body[data-layout=a] main::before{background-size:cover;filter:blur(24px);opacity:.42}body[data-layout=b] main::before{filter:none;opacity:1}body[data-layout=a] main{background:#100d12}
@media(max-width:760px){#navigation-toggle{display:block;flex-shrink:0;background:transparent;color:inherit;border:0;font-size:20px;padding:4px}.navigation-open .sidebar{display:block;position:fixed;inset:60px auto 0 0;width:min(280px,85vw);z-index:20;overflow:auto;box-shadow:12px 0 30px #0008}.composer-controls #model-open{max-width:100%;font-size:10px}#debug-open{margin-top:8px}}
#account-dialog{background:#211e25;color:#f9f2f7;width:min(440px,calc(100vw - 24px))}#account-dialog form{display:grid;gap:10px;margin:16px 0;border:0;padding:0;background:transparent}#account-dialog form[hidden]{display:none}#account-dialog input{width:100%;padding:10px;border:1px solid #756273;border-radius:8px;background:#302834;color:#fff;font:inherit;font-size:16px}#account-dialog button{border:1px solid #756273;border-radius:9px;padding:10px 12px;background:#403040;color:#fff;margin:4px}#account-dialog button:disabled{opacity:.5;cursor:default}#account-dialog p{font-size:13px;line-height:1.7;overflow-wrap:anywhere}