:root { color-scheme: dark; --bg:#07111f; --panel:#0e1d31e8; --line:#8eafd02b; --text:#edf7ff; --muted:#91a6bd; --cyan:#39d4d8; --violet:#8b7cff; --danger:#ff8192; font-family:Inter,ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 10% 0,#1b596633,transparent 32rem),radial-gradient(circle at 90% 10%,#5545a833,transparent 35rem),#050b14; }
button,input,select,textarea { font:inherit; } button { cursor:pointer; }
.app { width:min(1600px,calc(100% - 28px)); margin:auto; padding:20px 0 28px; }
header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:1.35rem; } h2 { margin-bottom:7px; }
.eyebrow { margin-bottom:4px; color:var(--cyan); font-size:.65rem; font-weight:900; letter-spacing:.17em; }
.header-actions { display:flex; align-items:center; gap:12px; } .header-actions a { color:#cce2f5; text-decoration:none; padding:9px 13px; border:1px solid var(--line); border-radius:10px; }
.status { color:var(--muted); font-size:.8rem; }.status.online { color:var(--cyan); }
.card { border:1px solid var(--line); border-radius:18px; background:var(--panel); box-shadow:0 20px 60px #0005; backdrop-filter:blur(18px); }
.connect { display:grid; grid-template-columns:1fr minmax(340px,.8fr); gap:28px; max-width:900px; margin:12vh auto 0; padding:36px; }.connect p { margin-bottom:0; color:var(--muted); line-height:1.5; }
.connect form { display:flex; gap:9px; align-self:center; }.error { min-height:1em; color:var(--danger); grid-column:2; font-size:.78rem; }
input,select,textarea { width:100%; color:var(--text); border:1px solid #8eafd039; border-radius:10px; outline:none; background:#030a13b8; } input,select { min-height:43px; padding:0 12px; } textarea { padding:13px; resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px #39d4d81a; }
button { min-height:42px; padding:0 16px; color:#031216; border:0; border-radius:10px; font-weight:850; background:linear-gradient(135deg,var(--cyan),#9ffff3); }.ghost { color:#c8d8e7; border:1px solid var(--line); background:#ffffff0b; }.small { min-height:30px; padding:0 9px; font-size:.72rem; }
.workspace { display:grid; grid-template-columns:250px minmax(420px,1fr) minmax(300px,.7fr); gap:12px; min-height:calc(100vh - 94px); }.hidden { display:none!important; }
.sidebar,.editor { padding:18px; overflow:hidden; }.sidebar label,.toolbar label { display:block; margin-bottom:7px; color:var(--muted); font-size:.72rem; font-weight:800; }
.tree-head { display:flex; align-items:center; justify-content:space-between; margin-top:22px; }.path { margin:8px 0; padding:7px 9px; overflow:hidden; color:var(--cyan); border-radius:8px; background:#39d4d80c; font: .7rem ui-monospace,monospace; text-overflow:ellipsis; white-space:nowrap; }
.file-list { display:grid; gap:4px; max-height:calc(100vh - 300px); overflow:auto; }.file { display:flex; align-items:center; gap:7px; width:100%; min-height:33px; padding:0 8px; overflow:hidden; color:#d9e8f5; background:transparent; font-size:.76rem; text-align:left; white-space:nowrap; text-overflow:ellipsis; }.file:hover { background:#ffffff0b; }.file.directory::before { content:"▸"; color:var(--cyan); }.file.file-item::before { content:"·"; color:var(--muted); }
.command-note { display:grid; gap:5px; margin-top:18px; color:var(--muted); font-size:.68rem; }.command-note strong { color:#ccdceb; }.command-note span { line-height:1.5; }
.chat { display:flex; flex-direction:column; min-height:0; overflow:hidden; }.toolbar { display:flex; align-items:end; justify-content:space-between; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line); }.toolbar>div { width:min(380px,70%); }
.messages { flex:1; min-height:300px; padding:20px; overflow:auto; }.welcome { padding:16px; color:var(--muted); border:1px dashed var(--line); border-radius:12px; }.welcome p { margin:6px 0 0; line-height:1.55; }
.message { max-width:85%; margin-bottom:13px; padding:12px 14px; border-radius:13px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }.message.user { margin-left:auto; background:#39d4d81a; }.message.assistant { background:#8b7cff17; }.message.system { max-width:100%; color:var(--muted); border:1px solid var(--line); background:#ffffff08; font-size:.78rem; }
.composer { display:grid; grid-template-columns:1fr auto; gap:9px; padding:14px; border-top:1px solid var(--line); }.composer textarea { min-height:74px; }.composer button { align-self:stretch; }
.editor { display:flex; flex-direction:column; }.editor-head { min-height:57px; }.editor-head strong { overflow-wrap:anywhere; }.editor textarea { flex:1; min-height:400px; resize:none; font: .76rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; }
.approval { max-width:100%; margin:10px 0 16px; padding:14px; border:1px solid #ffd36b55; border-radius:13px; background:#ffd36b0d; }.approval strong { color:#ffd987; }.approval pre { max-height:230px; overflow:auto; white-space:pre-wrap; color:#dce8f2; font-size:.72rem; }.approval>div { display:flex; gap:8px; }.approval .ghost { color:#f5c2ca; }
@media(max-width:1100px){.workspace{grid-template-columns:220px 1fr}.editor{display:none}} @media(max-width:720px){.app{width:calc(100% - 16px);padding-top:10px}.connect{grid-template-columns:1fr;padding:24px}.error{grid-column:1}.workspace{grid-template-columns:1fr}.sidebar{display:none}.composer{grid-template-columns:1fr}.header-actions .status{display:none}}

#project-form { display: grid; gap: 8px; margin-top: 16px; }
#project-name { min-width: 0; width: 100%; box-sizing: border-box; }
#project-select { margin-bottom: 8px; }

#connect-form { display:grid; grid-template-columns:1fr; gap:8px; max-width:400px; }
#account-panel { margin: 16px 0; padding:24px; } #key-form { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.account-row { display:flex; justify-content:space-between; gap:12px; padding:10px 0; align-items:center; }
#new-api-key { width:100%; } #share-form { display:grid; gap:8px; padding-top:12px; }
#share-panel { padding:12px 0; border-bottom:1px solid #263952; } summary { cursor:pointer; }
.run-status { padding:10px 20px; font-size:12px; color:#88a6bc; border-bottom:1px solid #24354b; }
.message { white-space:normal; } .message-meta { display:flex; gap:12px; align-items:center; margin-bottom:12px; font-size:12px; color:#94a9bd; }
.message-meta time { margin-left:auto; font-size:11px; } .message.user .markdown,.message.system .markdown { white-space:pre-wrap; }
.markdown { line-height:1.7; overflow-wrap:anywhere; } .markdown p { margin:8px 0; } .markdown h2,.markdown h3,.markdown h4 { margin:20px 0 10px; line-height:1.4; }
.markdown ul,.markdown ol { padding-left:24px; } .markdown code { background:#081426; border-radius:4px; padding:2px 5px; }
.code-block { margin:14px 0; border:1px solid #2a415a; border-radius:10px; overflow:hidden; background:#081426; }
.code-bar { padding:6px 12px; display:flex; justify-content:space-between; align-items:center; color:#91a8c1; font-size:12px; }
.code-bar button { padding:4px 10px; font-size:11px; } .code-block pre { padding:14px; margin:0; overflow:auto; white-space:pre; }
.code-block code { padding:0; } .markdown a { color:#5ddbd4; } .markdown blockquote { border-left:3px solid #58b6b4; padding-left:12px; margin-left:0; color:#b5c6d7; }
.table-scroll { overflow:auto; } .markdown table { border-collapse:collapse; width:100%; margin:12px 0; } .markdown th,.markdown td { border:1px solid #314257; padding:8px 12px; text-align:left; }
@media(max-width:700px){.header-actions{flex-wrap:wrap}.message{max-width:100%}.account-row{flex-wrap:wrap}}
@media(max-width:720px){.sidebar{display:block}.workspace{min-height:auto}.chat{min-height:70vh}.file-list{max-height:220px}.header-actions{gap:6px}.header-actions button{padding:0 8px;font-size:12px}.connect{grid-template-columns:minmax(0,1fr)}}

.theme-control{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}.theme-control select{width:122px;min-height:35px;font-size:12px}
.experience{display:grid;grid-template-columns:190px minmax(0,1fr);gap:12px}.history-panel{padding:16px;min-width:0;align-self:start;position:sticky;top:12px;max-height:calc(100vh - 100px);overflow:auto}
.history-heading{display:flex;align-items:center;justify-content:space-between;gap:4px}.history-heading h2{font-size:14px;margin:0}.history-heading button{font-size:10px;padding:0 6px}#history-status{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.6}
.history-item{display:block;width:100%;text-align:left;color:var(--text);background:transparent;padding:12px 8px;border-radius:9px;overflow-wrap:anywhere;font-size:12px;line-height:1.5;margin:4px 0}.history-item small{display:block;color:var(--muted);font-size:10px;margin-top:6px}.history-item:hover{background:#ffffff0c}.history-item.selected{background:#39d4d818;box-shadow:inset 3px 0 var(--cyan)}
.experience .workspace{grid-template-columns:210px minmax(300px,1fr) minmax(230px,.6fr);min-width:0}.experience .workspace.chat-only{grid-template-columns:minmax(0,1fr)}.chat-only>.sidebar,.chat-only>.editor{display:none}.chat-only>.chat{max-width:980px;width:100%;justify-self:center}
.mode-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line);gap:12px}.mode-bar [role=tablist]{display:flex;gap:4px;padding:4px;background:#0003;border-radius:12px}.mode-bar [role=tab]{background:transparent;color:var(--muted);min-height:32px;padding:0 15px}.mode-bar [aria-selected=true]{background:var(--cyan);color:#052122}.mode-bar>span{font-size:11px;color:var(--muted)}
:root[data-theme=light]{color-scheme:light;--bg:#f2f6fa;--panel:#ffffffed;--line:#d4dee8;--text:#172c40;--muted:#536c82;--cyan:#087f84;--violet:#6251b9;--danger:#b32145}
[data-theme=light] body{background:radial-gradient(circle at 0 0,#d9f4ef88,transparent 35rem),#f2f6fa;color:var(--text)}[data-theme=light] .card{box-shadow:0 12px 35px #19314b0b}
[data-theme=light] input,[data-theme=light] select,[data-theme=light] textarea{background:#fff;border-color:#bacbd9;color:var(--text)}[data-theme=light] button{background:#d2f1ec;color:#075d60}[data-theme=light] button.ghost,[data-theme=light] .header-actions a{background:#fff;color:#33546e;border-color:var(--line)}
[data-theme=light] .message.assistant{background:#eeecfb}[data-theme=light] .message.user{background:#dff3f0}[data-theme=light] .message.system{background:#f4f7fa;color:#4b6479}[data-theme=light] .message-meta{color:#5d6b83}
[data-theme=light] .code-block,[data-theme=light] .markdown code{background:#f6f8fc;color:#162e44}[data-theme=light] .code-block{border-color:#cbd8e4}[data-theme=light] .code-bar{color:#526d85}[data-theme=light] .markdown th,[data-theme=light] .markdown td{border-color:#c7d3e0}
[data-theme=light] .markdown a{color:#066e8c}[data-theme=light] .markdown blockquote{color:#4e6079}[data-theme=light] .file{background:transparent;color:#29485f}[data-theme=light] .file:hover{background:#e2ecf4}[data-theme=light] .command-note strong{color:#29485f}
[data-theme=light] .run-status,[data-theme=light] #share-panel{border-color:var(--line);color:#526b83}[data-theme=light] .approval{background:#fff7df;border-color:#ddbd61}[data-theme=light] .approval strong,[data-theme=light] .approval pre{color:#634819}
[data-theme=light] .history-item{background:transparent;color:var(--text)}[data-theme=light] .history-item.selected{background:#e0f2ef}[data-theme=light] .mode-bar [role=tablist]{background:#edf2f6}[data-theme=light] .mode-bar [role=tab]{background:transparent;color:#526b83}[data-theme=light] .mode-bar [aria-selected=true]{background:#087f84;color:white}
@media(max-width:1300px){.experience{grid-template-columns:180px minmax(0,1fr)}.experience .workspace{grid-template-columns:200px minmax(280px,1fr)}.experience .editor{display:none}}
@media(max-width:850px){.experience{grid-template-columns:1fr}.history-panel{position:static;max-height:230px}.experience .workspace{grid-template-columns:1fr}.history-heading{justify-content:flex-start;gap:16px}#history-list{display:flex;gap:6px;overflow:auto}.history-item{min-width:150px;max-width:190px}.mode-bar{flex-wrap:wrap}.theme-control select{width:95px}.header-actions{flex-wrap:wrap}.experience .chat{min-height:65vh}}
/* Keep the app inside the viewport; only panel contents can scroll. */
html,body{height:100%;min-height:0;overflow:hidden}
.app{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;padding-bottom:14px;overflow:hidden;position:relative}
.app>header{flex:none;min-width:0}
.app>.experience{flex:1;min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr)}
.experience .workspace{height:100%;min-height:0;grid-template-rows:minmax(0,1fr);overflow:hidden}
.experience .chat{height:100%;min-height:0;min-width:0;overflow:hidden}
.chat>.mode-bar,.chat>.toolbar,.chat>.run-status,.chat>.composer{flex:none}
.chat>.messages{flex:1 1 0;min-height:0;overflow:auto;overscroll-behavior:contain}
.composer textarea{resize:none;min-height:60px;max-height:120px;overflow:auto}
.experience .history-panel{height:100%;max-height:none;min-height:0;position:static;align-self:stretch;display:flex;flex-direction:column;overflow:hidden}
.history-heading,#history-status{flex:none}
#history-list{min-height:0;overflow:auto;overscroll-behavior:contain}
.experience .sidebar{min-height:0;overflow:auto;overscroll-behavior:contain}
.experience .editor{min-height:0}.editor textarea{min-height:0;overflow:auto}
#account-panel{position:absolute;z-index:5;top:70px;left:0;right:0;max-height:calc(100% - 90px);overflow:auto;margin:0}
.connect{min-height:0;overflow:auto;flex-shrink:1}
@media(max-width:850px){
  .app{padding-top:10px;padding-bottom:8px}.app>header{gap:8px;margin-bottom:8px;flex-wrap:wrap}
  .app>.experience{grid-template-rows:auto minmax(0,1fr);gap:8px}
  .experience .history-panel{height:auto;max-height:115px;padding:8px 12px}
  #history-status{margin:4px 0;font-size:10px}#history-list{flex:1}.history-item{margin:0;padding:6px 8px}
  .experience .workspace{grid-template-rows:minmax(0,.4fr) minmax(0,1fr);gap:8px}
  .experience .workspace.chat-only{grid-template-rows:minmax(0,1fr)}
  .experience .sidebar{padding:10px}.experience .chat{min-height:0}
  .mode-bar{padding:6px 10px;gap:4px}.toolbar{padding:6px 10px}.run-status{padding:6px 10px}
  .composer{grid-template-columns:minmax(0,1fr) auto;padding:8px}.composer textarea{min-height:52px;height:60px;padding:8px}
  .messages{padding:10px}.mode-bar>span{display:none}
}

/* Shared selection bar and collapsible side panels. */
.app{width:calc(100% - 28px)}
.agent-controls{display:flex;align-items:center;gap:10px;flex:none;padding:8px 12px;margin-bottom:12px;flex-wrap:wrap}
.agent-controls .mode-bar,.agent-controls .toolbar{border:0;padding:0;gap:8px}
.agent-controls .mode-bar>span{display:none}
.agent-controls .toolbar{flex:1;align-items:center;min-width:230px}
.agent-controls .toolbar>div{display:flex;align-items:center;gap:8px;width:auto;flex:1;max-width:420px}
.agent-controls .toolbar label{white-space:nowrap;margin:0;font-size:12px;color:var(--muted)}
.agent-controls select{min-width:100px;min-height:36px}.agent-controls #clear-button{min-height:36px}
.panel-toggles{display:flex;gap:6px;flex-wrap:wrap}.panel-toggles [aria-pressed=true]{border-color:var(--cyan);color:var(--cyan)}
.app>.experience{display:flex;width:100%;align-self:center;gap:12px;min-width:0}
.experience .history-panel{width:190px;flex:0 0 190px}
.experience .workspace{display:flex;flex:1;min-width:0;gap:12px}
.experience .sidebar{width:210px;flex:0 0 210px}
.experience .editor{display:flex;width:260px;flex:0 0 260px}
.experience .chat{flex:1;min-width:0;max-width:none;width:auto}
.panel-hidden{display:none!important}
.app>.experience.focused-chat{width:80vw;max-width:100%}
@media(max-width:1000px){.experience .history-panel{width:150px;flex-basis:150px}.experience .sidebar{width:170px;flex-basis:170px}.experience .editor{width:190px;flex-basis:190px}}
@media(max-width:850px){
 .agent-controls{gap:6px;padding:6px 8px;margin-bottom:8px}.panel-toggles{gap:4px}.panel-toggles button{min-height:26px;font-size:10px}
 .agent-controls .toolbar{min-width:180px}.agent-controls .toolbar label{display:none}.agent-controls #clear-button{padding:0 8px;font-size:11px}
 .app>.experience{flex-direction:column;gap:8px}.experience .history-panel{width:100%;flex:0 1 auto;max-height:100px}
 .experience .workspace{flex-wrap:wrap;gap:8px;align-content:stretch}
 .experience .sidebar,.experience .editor{flex:1 1 40%;width:auto;height:25%;min-height:0}
 .experience .chat{flex:1 1 100%;height:auto;order:1}
 .app>.experience.focused-chat{width:80vw}
}

.mfa-settings{display:grid;gap:10px;margin-top:18px}.mfa-settings label{display:grid;gap:6px}.mfa-settings img{max-width:100%;height:auto;background:white}.mfa-settings code,.mfa-settings pre{overflow-wrap:anywhere;white-space:pre-wrap}.mfa-settings p{font-size:12px;line-height:1.6;margin:0}.mfa-actions{display:flex;flex-wrap:wrap;gap:8px}.mfa-settings [hidden]{display:none!important}

#security-dialog{width:min(620px,90vw);max-height:85vh;overflow:auto;border:1px solid #64748b;border-radius:14px;padding:24px;background:var(--panel,#182131);color:var(--text,#e5e7eb)}#security-dialog::backdrop{background:#0009}.security-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}#security-dialog .mfa-settings{display:grid;gap:10px}#security-dialog input{width:100%;box-sizing:border-box}


.experience .usage-panel{width:250px;flex:0 0 250px;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.usage-panel h2{font-size:16px}.usage-panel .muted{font-size:12px;line-height:1.6;color:var(--muted);margin:0}.usage-stat{padding:12px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}.usage-stat p{font-size:12px;line-height:1.6;margin:7px 0}.usage-panel.panel-hidden{display:none!important}#user-menu.hidden{display:none!important}#toggle-user-menu{margin-left:auto;white-space:nowrap}@media(max-width:850px){.experience .usage-panel{width:100%;flex:0 1 auto;max-height:220px}}

#user-header.hidden{display:none!important}.usage-stat progress{width:100%;height:10px;accent-color:var(--cyan)}

.attachment-controls{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px;align-items:center}.attachment-controls .muted{font-size:11px;color:var(--muted)}#attachment-list{width:100%;max-height:90px;overflow:auto}#attachment-list>div{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:10px}.attachment-controls .error:empty{display:none}.message-attachment{margin-top:12px;border:1px solid var(--line);border-radius:8px;padding:10px}.message-attachment summary{cursor:pointer;overflow-wrap:anywhere}.message-attachment pre{max-height:260px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere}

.chat{position:relative}.chat.file-drag-over{outline:2px dashed var(--cyan);outline-offset:-4px}.chat.file-drag-over::after{content:"여기에 파일을 놓아 첨부하세요";position:absolute;inset:10px;z-index:20;display:grid;place-items:center;border-radius:12px;background:var(--panel);color:var(--text);font-size:18px;font-weight:700;pointer-events:none;border:2px dashed var(--cyan)}

#team-dialog{width:min(720px,94vw);max-height:85vh;overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:24px}#team-dialog::backdrop{background:#0009}.team-role{border:1px solid var(--line);border-radius:10px;padding:12px;margin:12px 0;display:grid;gap:8px}.team-role label{display:grid;gap:5px}.team-role input:not([type=checkbox]),.team-role select,.team-role textarea{width:100%}#team-summary{font-size:12px;overflow-wrap:anywhere}#team-dialog p{font-size:13px;line-height:1.6}