@font-face{font-family:"HBIOS-SYS Continuous";src:local("HBIOS-SYS Continuous"),local("HBIOS-SYS-Continuous"),url("/assets/HBIOS-SYS-Continuous.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
:root{font-family:"HBIOS-SYS Continuous","Noto Sans KR",monospace;color:#e6ebf5;background:#080e1d;color-scheme:dark;font-synthesis:none;font-size:16px;line-height:1.6;--muted:#a2aec5;--line:#94afd51f;--accent:#b4c8ff}
*{box-sizing:border-box}
body{margin:0;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,#080e1d22,#080e1d55),url('/assets/night-sky.png') center center/cover no-repeat;pointer-events:none}
body::after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#080e1d05,#080e1d66 26%,#080e1d66 74%,#080e1d05);pointer-events:none}
button,textarea{font:inherit}
button,a,textarea{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{cursor:default}
button,a{touch-action:manipulation}
button:focus-visible,a:focus-visible,.chat-scroll:focus-visible{outline:2px solid #bed1ff;outline-offset:4px}
a{color:inherit}
[hidden]{display:none!important}
.app-shell{max-width:1344px;height:100vh;height:100dvh;margin:auto;display:flex;flex-direction:column}
.topbar{min-height:82px;flex-shrink:0;padding:18px 34px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;gap:10px;align-items:center;font-size:1.0625rem;letter-spacing:-.4px;font-weight:600;text-decoration:none;color:#f0f3fb}
.brand-mark{display:grid;place-items:center;width:31px;height:31px;border:1px solid #b7cbf44a;border-radius:50%;background:#1c2c487a;color:#d9e4ff;font-size:1rem;font-weight:500}
.quiet-button{display:flex;align-items:center;gap:5px;border:1px solid #91a7d02e;border-radius:10px;background:#111c3199;padding:8px 12px;min-height:40px;font-size:.875rem;color:#c0cce1}
.quiet-button:hover{background:#24334c;border-color:#91a7d063}
.quiet-button:disabled{opacity:.45}
.quiet-button span{font-size:1.125rem;line-height:1}
main{min-height:0;flex:1;display:flex;flex-direction:column}
.chat-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#54658655 transparent;padding:12px 34px 24px}
.welcome{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px 0 70px}
.welcome h1{font-size:clamp(1.55rem,4vw,2rem);line-height:1.5;letter-spacing:-1px;font-weight:500;margin:0;color:#f1f4fb;text-shadow:0 2px 22px #060b18}
.welcome p{font-size:.9375rem;color:#aebbd2;margin:12px 0 0}
.conversation{max-width:1064px;margin:auto;padding:10px 0 6px}
.message{min-width:0;margin:0 0 26px}
.message.user{display:flex;justify-content:flex-end;padding-left:40px}
.user .message-content{background:#233553ed;border:1px solid #9cb8ee26;padding:12px 17px;border-radius:18px 18px 4px 18px;white-space:pre-wrap;max-width:88%;line-height:1.75;overflow-wrap:anywhere;color:#f0f3fb}
.message.assistant{padding:19px 21px 15px;background:#0e192be8;border:1px solid var(--line);border-radius:4px 18px 18px 18px}
.assistant .message-content{line-height:1.85;overflow-wrap:anywhere;font-size:1rem;color:#e1e7f2}
.message-content>:first-child{margin-top:0}
.message-content>:last-child{margin-bottom:0}
.message-content h1,.message-content h2,.message-content h3,.message-content h4,.message-content h5,.message-content h6{font-size:1.125rem;line-height:1.6;letter-spacing:-.2px;margin:1.2em 0 .6em;color:#f2f5fc}
.message-content p{margin:.8em 0}
.message-content ul,.message-content ol{padding-left:1.5em}
.message-content li{margin:.35em 0}
.message-content pre{background:#070e1d;color:#e1e9fa;border:1px solid #adc7f31c;border-radius:10px;padding:16px;overflow:auto;white-space:pre;font-size:.875rem;line-height:1.7;max-width:100%}
.message-content code{font-family:"HBIOS-SYS Continuous",Consolas,monospace;font-size:.9em;background:#263752;padding:2px 5px;border-radius:4px;color:#e0eaff}
.message-content pre code{background:none;padding:0;border-radius:0}
.message-content blockquote{border-left:2px solid #829fda;margin:1em 0;padding:0 0 0 16px;color:#afbed8}
.message-content a{color:#b9cdff;text-decoration:underline;text-underline-offset:3px}
.message-content table{display:block;overflow:auto;border-collapse:collapse;font-size:.9375rem;max-width:100%}
.message-content th,.message-content td{border:1px solid #7892bf3d;padding:9px 12px;text-align:left}
.message-content th{background:#22324c;color:#eaf0fc}
.message-content hr{border:0;border-top:1px solid #94afd530;margin:1.5em 0}
.message-actions{display:flex;align-items:center;gap:12px;margin-top:13px;min-height:30px}
.copy-button{border:0;background:transparent;font-size:.875rem;color:#aab9d2;padding:4px 0;min-height:30px}
.copy-button:hover{color:#e4ecff}
.message-status{font-size:.875rem;color:#a1b1cb}
.message-status:empty{display:none}
.thinking{display:flex;gap:5px;align-items:center;height:28px}
.thinking i{width:5px;height:5px;border-radius:50%;background:#adbfec;animation:pulse 1.2s infinite}
.thinking i:nth-child(2){animation-delay:.2s}
.thinking i:nth-child(3){animation-delay:.4s}
@keyframes pulse{0%,70%,100%{opacity:.35}35%{opacity:1}}
.composer-dock{flex-shrink:0;width:100%;padding:12px 34px max(20px,env(safe-area-inset-bottom));background:linear-gradient(180deg,#080e1d00,#080e1d66 42%);margin:0}
.composer{max-width:1064px;margin:auto;display:grid;grid-template-columns:42px minmax(0,1fr) 42px;align-items:end;gap:6px;border:1px solid #a3b8e23b;border-radius:19px;background:#131f34f2;padding:9px;box-shadow:0 12px 45px #0003;transition:border-color .15s,box-shadow .15s}
.composer:focus-within{border-color:#9cb8f296;box-shadow:0 0 0 3px #9cb8f20a,0 12px 45px #0003}
textarea{display:block;width:100%;border:0;outline:0;resize:none;background:transparent;color:#eef2fb;min-height:44px;max-height:210px;line-height:1.6;padding:9px 5px;overflow-y:auto}
textarea::placeholder{color:#9aaac5}
.send-controls{display:flex;align-items:center;justify-content:center}
.send-button{display:grid;place-items:center;background:#bbccf5;border:0;color:#142443;width:42px;height:42px;border-radius:12px}
.send-button:hover{background:#d2dfff}
.send-button:disabled{background:#2b3b56;color:#788bab}
.stop-button{font-size:1rem;background:#d5bad0;color:#352236}
.attach-button{display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:#b6c5df;width:42px;height:42px}
.attach-button:hover{background:#2b3d5b;color:#e5edff}
.attach-button:disabled{opacity:.45}
.composer-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;max-width:1064px;margin:10px auto 0;color:#9aabc7;font-size:.75rem;padding:0 3px}
.composer-meta p{margin:0}
.composer-meta p span{margin:0 5px}
.composer-meta a{text-decoration:none}
.composer-meta a:hover{color:#d2def4}
kbd{font:inherit}
.attachment-card{grid-column:1/-1;display:flex;align-items:center;gap:10px;border:1px solid #89a6d839;border-radius:12px;background:#1e2e46;padding:10px;margin:0 0 3px}
.attachment-details{min-width:0;flex:1}
.attachment-details strong{display:block;font-size:.875rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e4ecfb}
.attachment-details small{display:block;font-size:.8125rem;color:#adbedb;margin-top:2px}
.attachment-card img{width:42px;height:42px;object-fit:cover;border-radius:7px}
.attachment-card button{border:0;background:transparent;color:#bdcbe1;font-size:1.375rem;min-width:38px;min-height:38px;padding:0 8px}
.sent-file{display:block;font-size:.875rem;line-height:1.5;margin-top:9px;padding-top:8px;border-top:1px solid #a9bfe331;color:#c1d1eb;overflow-wrap:anywhere}
.error-banner{max-width:1064px;margin:0 auto 12px;border:1px solid #db99b54d;background:#392333f2;color:#f5c8d7;padding:12px 16px;border-radius:12px;font-size:.875rem}
.skip-link{position:fixed;top:8px;left:8px;z-index:5;background:#172b4b;padding:9px 15px;border-radius:8px;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
::selection{color:#fff;background:#435b90}
@media(max-width:620px){.topbar{min-height:70px;padding:14px 18px}.brand{font-size:1rem}.chat-scroll{padding:10px 16px 18px}.welcome{padding-bottom:45px}.welcome h1{font-size:1.6rem}.composer-dock{padding:10px 14px max(14px,env(safe-area-inset-bottom))}.composer{padding:7px;gap:3px;border-radius:17px;grid-template-columns:40px minmax(0,1fr) 40px}.attach-button,.send-button{width:40px;height:42px}.composer-meta{font-size:.75rem;margin-top:9px}.message{margin-bottom:20px}.message.assistant{padding:16px 16px 12px}.message.user{padding-left:24px}.user .message-content{max-width:95%;padding:11px 15px}.conversation{padding-top:5px}}
@media(max-width:350px){.composer-meta{justify-content:center}.composer-meta .page-links{justify-content:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(forced-colors:active){body::before,body::after{display:none}.composer,.message.assistant,.user .message-content{border:1px solid CanvasText}.send-button{border:1px solid ButtonText}}

.chat-scroll{padding-top:34px}
.composer-options{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.meta-button{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:7px;background:transparent;color:inherit;font-size:inherit;padding:5px 3px;min-height:32px}
.meta-button:hover{color:#edf2ff;background:#263b5944}
.meta-button:disabled{opacity:.45}
.font-controls{display:flex;gap:4px;align-items:center}
.font-controls button{display:grid;place-items:center;width:32px;height:32px;border:1px solid #a3b8e237;border-radius:7px;background:#17263dcc;color:#c8d7f1;font-size:1rem;padding:0}
.font-controls button:hover{background:#2a3d5e}
.font-controls button:disabled{opacity:.35}
.page-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
@media(max-width:620px){.chat-scroll{padding-top:22px}.composer-meta{align-items:flex-start;gap:8px}.composer-options{gap:5px 10px}.page-links{gap:14px}}

.picture-messages{list-style:none;max-width:1064px;min-height:100%;margin:0 auto;padding:0;display:flex;flex-direction:column;gap:26px}
.picture-messages>.welcome{flex:1;min-height:0;margin:0}
.picture-messages .message{display:flex;flex-direction:column;align-items:flex-start;gap:7px;max-width:100%;margin:0}
.picture-messages .message.assistant{padding:0;background:none;border:0}
.picture-messages .message.user{align-items:flex-end}
.bubble{max-width:100%;background:#0e192bed;border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:14px 18px;overflow-wrap:anywhere}
.bubble p{margin:0;white-space:pre-wrap}
.picture-messages .user .bubble{background:#233553ed;color:#f0f3fb;border-color:#9cb8ee26;border-radius:18px 18px 4px 18px;max-width:90%}
.image-reply{padding:6px;max-width:728px;width:100%}
.result-image{display:block;width:100%;height:auto;border-radius:3px 12px 12px 12px}
.image-actions{display:flex;justify-content:flex-end;padding:9px 8px 5px}
.download{display:inline-flex;align-items:center;font-size:.875rem;text-decoration:none;color:#ccdcff;padding:6px 10px;border:1px solid #9fbbe04d;border-radius:8px;min-height:38px}
.download:hover{background:#243957}
.pending{display:flex;align-items:center;gap:12px;color:#d4e0f4}
.pending small{display:block;color:#a8b8d0;font-size:.875rem;margin-top:2px}
.spinner{width:18px;height:18px;border:2px solid #7185ac55;border-top-color:#d6e3ff;border-radius:50%;animation:rotate 1s linear infinite;flex-shrink:0}
.failure{border-color:#bd8ba44d;background:#392333ed}
.failure p{color:#f5c8d7}
.retry{border:1px solid #bf95a961;border-radius:8px;padding:7px 12px;background:#54364b;color:#f4dce8;margin-top:12px;font-size:.875rem;min-height:38px}
.retry:disabled{opacity:.5}
.picture-composer{grid-template-columns:minmax(0,1fr) 42px}
.picture-composer textarea{padding-left:10px}
@keyframes rotate{to{transform:rotate(360deg)}}
@media(max-width:620px){.picture-messages{gap:22px}.picture-composer{grid-template-columns:minmax(0,1fr) 40px}.bubble{padding:12px 15px}.image-reply{padding:5px}}