body.chat-open .sidebar{display:none}
body.chat-open .app-main{margin:0;padding:0;width:100%;height:100dvh}
body.chat-open .produce-page{padding:20px 24px;height:100dvh;box-sizing:border-box;background:#f7f7f4}
.chat-shell{width:min(880px,100%);height:100%;margin:0 auto;display:flex;flex-direction:column;background:#fffefa;border:1px solid #e7e6de;border-radius:22px;overflow:hidden;box-shadow:0 6px 34px #403b2606}
.chat-conversation{flex:1;min-height:0;overflow-y:auto;padding:30px 34px 20px;scrollbar-width:thin;overscroll-behavior:contain}
.chat-message{max-width:95%;margin:0 0 27px;font-size:15px;line-height:1.75}
.chat-message.user{margin-left:auto;max-width:78%;background:transparent;border:0;border-radius:0;box-shadow:none;padding:12px 18px}
.chat-message-label{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#898a7c}
.chat-message-text{margin:5px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-turn-status{font-size:12px;color:#919080;margin:9px 0 0;line-height:1.5}
.chat-turn-status.is-error{color:#a34d49}
.chat-composer{border-top:1px solid #efeee5;margin:0 22px;padding:16px 0 18px;background:#fffefa}
.chat-composer textarea{display:block;resize:none;width:100%;border:0;outline:0;box-shadow:none;min-height:60px;max-height:180px;background:transparent;padding:4px 8px;font:400 15px/1.6 system-ui;color:#33372f;box-sizing:border-box}
.chat-composer textarea::placeholder{color:#a0a092}
.chat-composer-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 4px 0}
.chat-composer-footer #prompt-status{font:11px/1.5 system-ui;color:#969589;max-width:65%}
.chat-composer .produce-button{display:inline-flex;gap:12px;align-items:center;padding:12px 19px;min-width:120px;width:auto;flex:0 0 auto;min-height:44px;border-radius:13px;background:#777c45;color:white;border:0;cursor:pointer;font-weight:600;box-shadow:none}
.chat-composer .produce-button:hover{background:#656a35}
.chat-composer .produce-button:focus-visible{outline:3px solid #c1c690;outline-offset:3px}
.chat-composer .produce-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.chat-artifact{background:#f7f6f0;border:1px solid #e8e6d9;border-radius:14px;padding:14px;margin-top:15px}
.chat-artifact-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.chat-artifact-heading strong{font-size:13px;font-weight:600}
.chat-artifact-heading span{font-size:10px;color:#8e8b80;white-space:nowrap}
.chat-mini-timeline{display:block;width:100%;height:122px;margin:14px 0 8px;cursor:crosshair}
.chat-artifact audio{display:block;width:100%;height:34px}
.chat-message.assistant{padding-right:12px}
.chat-music-analysis{margin:24px 0 10px;color:var(--portrait-analysis-text,#69646e);font-family:var(--portrait-analysis-font,'Iowan Old Style','Palatino Linotype',Palatino,'Noto Serif Khmer',Georgia,serif);font-size:17px;line-height:1.8;overflow-wrap:anywhere}
.chat-music-analysis h3{font:italic 1.35em/1.3 var(--portrait-analysis-font,Georgia,serif);color:inherit;margin:0 0 18px;font-weight:400}
.chat-music-analysis h4{font:inherit;font-style:italic;font-weight:600;color:inherit;margin:22px 0 8px}
.chat-music-analysis p{white-space:pre-wrap;margin:0 0 14px}
.chat-music-analysis .chat-analysis-note{font-size:.9em;font-style:italic}
@media(max-width:600px){body.chat-open .produce-page{padding:0}
.chat-shell{border:0;border-radius:0}
.chat-conversation{padding:23px 19px}
.chat-composer{margin:0 14px}
.chat-message.user{max-width:88%}
.chat-artifact-heading{flex-wrap:wrap;gap:3px}
.chat-composer-footer #prompt-status{max-width:53%}
}