:root{color-scheme:light;--bg:#eef2f8;--glass:rgba(255,255,255,.55);--glass-strong:rgba(255,255,255,.8);--edge:rgba(255,255,255,.9);--line:rgba(24,32,46,.1);
--ink:#18202e;--mute:#6b7689;--accent:#3b6cf0;--accent-ink:#fff;--user:rgba(59,108,240,.14);--warn:#c0392b;--ok:#1f8a5b;--blur:blur(18px) saturate(1.5);--soft:0 8px 30px rgba(40,60,110,.08);
--seg:rgba(255,255,255,.55);--field:rgba(255,255,255,.75);--hover:rgba(255,255,255,.9);--inline-code:rgba(24,32,46,.08);--thumb:rgba(24,32,46,.18);--radius-lg:20px}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:
 radial-gradient(42vmax 42vmax at 6% 4%,#bcd4ff 0,transparent 62%),
 radial-gradient(46vmax 46vmax at 96% 42%,#d9c8ff 0,transparent 62%),
 radial-gradient(42vmax 42vmax at 38% 108%,#c4ecf5 0,transparent 62%)}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
.faint{color:var(--mute);font-size:12px}
.muted{color:var(--mute)}
.glass{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--edge);border-radius:var(--radius-lg);box-shadow:var(--soft)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.msg,.sheet{background:rgba(255,255,255,.92)}}

#app{max-width:860px;height:100%;margin:0 auto;padding:12px;display:flex;flex-direction:column;gap:10px}
#top{display:flex;align-items:center;gap:10px;padding:8px 12px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:8px;margin-right:4px}
.brand b{font-size:17px}
.seg{display:flex;padding:3px;gap:2px;background:var(--seg);border:1px solid var(--edge);border-radius:14px;overflow-x:auto}
.seg button{border:0;background:none;padding:6px 14px;border-radius:11px;color:var(--mute);white-space:nowrap}
.seg button.on{background:var(--accent);color:var(--accent-ink)}
.top-actions{margin-left:auto;display:flex;gap:6px}
.link{border:0;background:none;color:var(--accent);padding:4px 6px;font-size:13px}
.link:disabled{color:var(--mute);cursor:default}
.link.danger{color:var(--warn)}
#desc{margin:0 6px;font-size:13px}

#opts[hidden]{display:none}
#opts{padding:10px 12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px 10px;align-items:end}
#opts label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--mute)}
#opts .wide{grid-column:span 2}
#opts .hint{grid-column:1/-1;margin:0;font-size:12px;color:var(--mute)}
select,input[type=text],input[type=password],input:not([type]),input[type=number]{border:1px solid var(--line);background:var(--field);border-radius:12px;padding:7px 10px;width:100%;color:var(--ink)}
select:disabled{opacity:.55}

#thread{flex:1;min-height:0;overflow:auto;padding:6px 4px;display:flex;flex-direction:column;gap:12px}
.empty{margin:auto;text-align:center;color:var(--mute);display:flex;flex-direction:column;gap:8px;align-items:center;padding:20px 0}
.examples{display:flex;flex-direction:column;gap:6px;align-items:center}
.example{border:1px solid var(--edge);background:var(--seg);border-radius:14px;padding:7px 14px;color:var(--ink);max-width:100%;text-align:left}
.example:hover{background:var(--hover)}
.msg{max-width:92%;padding:10px 15px;border-radius:20px;border:1px solid var(--edge);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);box-shadow:var(--soft);word-break:break-word}
.msg.me{align-self:flex-end;background:var(--user);border-bottom-right-radius:6px;white-space:pre-wrap}
.msg.bot{align-self:flex-start;background:var(--glass);border-bottom-left-radius:6px;min-width:0}
.msg.wait{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--mute)}
.attached{font-size:12px;color:var(--mute);margin-top:4px}
.warn{color:var(--warn);font-size:13px;margin-top:6px}
.foot{display:flex;gap:10px;align-items:center;margin-top:8px;font-size:12px;color:var(--mute)}
.foot .link{margin-left:auto}
.dots i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:3px;animation:b 1s infinite ease-in-out}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes b{0%,80%,100%{opacity:.25}40%{opacity:1}}
.sources{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px}
.sources a{display:flex;gap:6px;align-items:baseline;color:var(--ink);text-decoration:none;padding:4px 8px;border-radius:10px;background:var(--seg)}
.sources a:hover{background:var(--hover)}
.sources .n{color:var(--accent);font-weight:600}
.sources .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.err{align-self:stretch;border:1px solid rgba(192,57,43,.3);background:var(--field);color:var(--warn);border-radius:16px;padding:10px 14px}

.md p{margin:0 0 .6em}.md p:last-child{margin-bottom:0}
.md-h{font-weight:600;margin:.7em 0 .3em}.md-h1{font-size:1.2em}.md-h2{font-size:1.1em}
.md ul,.md ol{margin:.3em 0 .6em;padding-left:1.3em}
.md code.in{background:var(--inline-code);padding:1px 5px;border-radius:6px;font-size:.9em}
.md a{color:var(--accent)}
.code{margin:.5em 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--field)}
.code-head{display:flex;justify-content:space-between;align-items:center;padding:3px 10px;font-size:12px;color:var(--mute);border-bottom:1px solid var(--line)}
.code pre{margin:0;padding:10px;overflow:auto;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.table{overflow:auto;margin:.5em 0}
.table table{border-collapse:collapse;font-size:13px}
.table th,.table td{border:1px solid var(--line);padding:4px 8px;text-align:left}

#docbar{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px}
.chip{display:flex;align-items:center;border:1px solid var(--edge);background:var(--glass);border-radius:14px;max-width:100%}
.chip.bad{border-color:rgba(192,57,43,.4)}
.chip .open{border:0;background:none;padding:5px 4px 5px 12px;text-align:left;min-width:0;max-width:260px;display:flex;flex-direction:column}
.chip .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.chip .x{border:0;background:none;padding:4px 10px;color:var(--mute)}
#composer{display:flex;align-items:flex-end;gap:6px;padding:6px 6px 6px 8px;border-radius:22px}
#composer.drop{outline:2px dashed var(--accent)}
.icon{border:0;background:none;padding:8px;border-radius:12px;color:var(--mute);display:flex}
.icon:hover{background:var(--hover)}
.icon:disabled{opacity:.4;cursor:default}
#input{flex:1;border:0;background:transparent;resize:none;padding:9px 6px;max-height:150px;outline:none}
.send{border:0;background:var(--accent);color:var(--accent-ink);border-radius:15px;padding:9px 18px}
.send:disabled{opacity:.5;cursor:default}

.backdrop{position:fixed;inset:0;background:rgba(24,32,46,.28);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:9;padding:12px}
.backdrop[hidden]{display:none}
.sheet{background:var(--glass-strong);width:min(100%,640px);max-height:92vh;overflow:auto;padding:18px;display:flex;flex-direction:column;gap:12px}
.sheet h2{margin:0;font-size:17px}
.sheet h3{margin:0;font-size:14px}
.sheet .sec{border:1px solid var(--edge);background:var(--seg);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.sheet .row{display:flex;gap:8px;flex-wrap:wrap}
.sheet .row>label{flex:1;min-width:140px;display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--mute)}
.sheet .bar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.sheet textarea{width:100%;min-height:50vh;border:1px solid var(--line);background:var(--field);border-radius:12px;padding:10px;font:13px/1.55 ui-monospace,Menlo,monospace}
.btn{border:1px solid var(--edge);background:var(--field);border-radius:12px;padding:8px 14px}
.btn:hover{background:var(--hover)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
.sheet ul.sample{margin:0;padding-left:1.2em;font-size:13px}
.srow{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 0;border-top:1px solid var(--line)}
.srow:first-of-type{border-top:0}
.note{font-size:12px;color:var(--mute);margin:0}
.ok{color:var(--ok)}.bad{color:var(--warn)}

::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:8px}
@media(max-width:640px){#app{padding:8px;gap:8px}.brand .faint{display:none}#opts .wide{grid-column:1/-1}.msg{max-width:96%}}

#modelpick{width:auto;max-width:150px;align-self:center;padding:6px 8px;font-size:12px;border-radius:12px;flex:none}#modelpick[hidden]{display:none}
/* iOS 스타일 스위치: 꺼짐은 회색, 켜짐은 초록 + 동그라미가 오른쪽으로 */
.think{flex:none;align-self:center;display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;padding:4px 2px;font-size:12px;color:var(--ink);-webkit-tap-highlight-color:transparent}
.think .sw{position:relative;flex:none;width:44px;height:26px;border-radius:13px;background:#d1d1d6;transition:background .2s ease}
.think .sw::after{content:"";position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.4,0,.2,1)}
.think.on .sw{background:#34c759}
.think.on .sw::after{transform:translateX(18px)}
.think:active .sw::after{width:26px}
.think.on:active .sw::after{transform:translateX(14px)}
.think:focus-visible .sw{outline:2px solid var(--accent);outline-offset:2px}
.think:disabled{opacity:.5;cursor:default}
.think[hidden]{display:none}

#thread.drop{outline:2px dashed var(--accent,#3b82f6);outline-offset:-6px}
.mdpanel{display:flex;flex-direction:column;gap:12px;width:100%}
.mdpanel .dropzone{border:1px dashed var(--edge);background:rgba(255,255,255,.5);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mdcard{border:1px solid var(--edge);background:var(--glass);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.mdcard.bad{border-color:#e5484d}
.mdhead{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.mdname{min-width:0;overflow-wrap:anywhere}
.mdtext{width:100%;min-height:200px;max-height:50vh;font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;resize:vertical;box-sizing:border-box}
.mdcard .bar{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
#composer[hidden],#docbar[hidden]{display:none!important}

/* 다른 앱 안에 넣었을 때(?embed=dm): 바깥 앱의 테마 색을 받아 쓰고, 번짐·블러 없이 평평하게 보인다. 색은 embed.js 가 변수로 덮어쓴다 */
html.dm-embed body::before{display:none}
html.dm-embed{--blur:none;--soft:none}
html.dm-embed #app{max-width:none;padding:0}
html.dm-embed .brand{display:none}
html.dm-embed .glass{box-shadow:none}
html.dm-embed body{font-family:var(--font,inherit)}
@media(max-width:640px){#composer{flex-wrap:wrap;row-gap:6px}#modelpick{max-width:48vw}#input{order:10;flex:1 1 calc(100% - 96px);min-width:0}#send{order:11;white-space:nowrap}}
.mdcard.pend{border-color:var(--accent)}

.gcard{text-align:left;cursor:pointer;width:100%;font:inherit;color:inherit}.gcard:hover{border-color:var(--accent)}