*{padding:0;margin:0;box-sizing:border-box}input,textarea{outline:none;border:1px dashed #ccc;border-radius:.5rem;padding:.5rem;font-size:.875rem;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400}button{padding:.5rem;border-radius:.5rem;border:1px dashed #ccc;background-color:#fff;font-size:1rem;cursor:pointer;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:500}button:hover{border:1px dashed #000}body{background-color:#fff;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:clamp(.875rem,2vw,1.125rem);line-height:1.4;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100vw;height:100vh;padding:20px}.app{width:100%;height:100%;display:flex;flex-direction:column;gap:10px}.setting{display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:100%}.setting label{margin-right:.625rem;font-size:1rem;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:500}.clear-history{margin-left:auto}.history{display:flex;flex-direction:column;gap:10px;width:100%;flex:1;overflow-y:auto}.history .message{border:1px dashed #ccc;border-radius:.5rem;padding:1rem;font-size:1rem}.history .message .role{font-weight:600;font-size:.875rem;color:#666;margin-bottom:.5rem;display:block;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.history .message .content{font-size:1rem;white-space:pre-wrap;word-wrap:break-word;font-family:Noto Sans SC,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400}.history .message.outputting{border:2px dashed #ccc;animation:dash-spin 2s linear infinite;background-image:linear-gradient(90deg,#ccc 50%,transparent 50%),linear-gradient(90deg,#ccc 50%,transparent 50%),linear-gradient(0deg,#ccc 50%,transparent 50%),linear-gradient(0deg,#ccc 50%,transparent 50%);background-size:16px 2px,16px 2px,2px 16px,2px 16px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;border:none}.editor{width:100%}.editor textarea{width:100%;resize:none}@keyframes dash-spin{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:16px 0,-16px 100%,0 -16px,100% 16px}}