*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans JP,sans-serif;background:#12171d;color:#fff;height:100vh;margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}#app{width:430px;height:980px;max-width:100%;max-height:100vh;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;box-shadow:0 20px 40px #0009;background:#0f1418}.device-shell{display:flex;align-items:center;justify-content:center;width:100%;height:100vh;position:relative;z-index:0}@media (min-width: 720px){.device-shell{background:linear-gradient(180deg,#ffffff05,#00000005);padding:36px;box-sizing:border-box}.device-shell:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:502px;height:1052px;border-radius:40px;background:linear-gradient(135deg,#0b0f12,#101316);box-shadow:0 30px 80px #0009,inset 0 2px 8px #ffffff05;z-index:0}.device-shell:after{content:"";position:absolute;top:calc(50% - 476px);left:50%;transform:translate(-50%);width:120px;height:6px;background:#ffffff0f;border-radius:6px;z-index:2}#app{z-index:1;position:relative}}header{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#2a2a2a;border-bottom:1px solid #444;height:64px;flex:0 0 64px}header h1{font-size:1.2rem;font-weight:600}#exportBtn{padding:.5rem 1rem;background:#444;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background .2s}#exportBtn:hover{background:#555}#exportBtn:focus{outline:2px solid #0084ff;outline-offset:2px}main{flex:1 1 auto;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.8rem}.bubble{max-width:70%;padding:.8rem 1rem;border-radius:18px;line-height:1.5;word-wrap:break-word;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.bubble.user{align-self:flex-end;background:#0084ff;color:#fff}.bubble.npc{align-self:flex-start;background:#3a3a3a;color:#eee}.bubble.loading{display:flex;gap:6px;align-items:center;padding:.8rem 1.2rem}.bubble.loading .dot{width:8px;height:8px;border-radius:50%;background:#888;animation:bounce 1.4s infinite ease-in-out both}.bubble.loading .dot:nth-child(1){animation-delay:-.32s}.bubble.loading .dot:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(.8);opacity:.5}40%{transform:scale(1);opacity:1}}footer{display:flex;gap:.5rem;padding:1rem;background:#2a2a2a;border-top:1px solid #444;height:72px;flex:0 0 72px}#msg{flex:1;padding:.8rem 1rem;background:#1a1a1a;color:#fff;border:1px solid #444;border-radius:20px;font-size:1rem;outline:none;transition:border-color .2s}#msg:focus{border-color:#0084ff}#send{padding:.8rem 1.5rem;background:#0084ff;color:#fff;border:none;border-radius:20px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}#send:hover:not(:disabled){background:#0073e6}#send:disabled{background:#444;cursor:not-allowed}#send:focus{outline:2px solid #0084ff;outline-offset:2px}@media (max-width: 460px){#app{width:100vw;height:100vh;border-radius:0}.bubble{max-width:85%}header h1{font-size:1rem}#exportBtn{font-size:.8rem;padding:.4rem .8rem}#msg,#send{font-size:.9rem}}