/* DFAS AI Agent — forensic console. Dark slate · amber/cyan/violet accents · evidence-linking. */
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-display:swap; src:url('fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-display:swap; src:url('fonts/ibm-plex-mono-latin-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:600; font-display:swap; src:url('fonts/ibm-plex-mono-latin-600.woff2') format('woff2'); }

:root{
  --bg:#0a0c10; --bg-grain:#0c0f14; --panel:#12151c; --panel-2:#161a23; --panel-3:#1c212c;
  --line:#262c39; --line-soft:#1d222c;
  --ink:#e7eaf0; --ink-2:#aab2c0; --ink-3:#6b7484; --ink-4:#495162;
  --amber:#ffb734; --amber-dim:#b9842a; --cyan:#4fd1e0; --cyan-dim:#2c8b97;
  --green:#57d99a; --red:#ff6b6b; --violet:#9d8cff;
  --shadow:0 1px 0 rgba(255,255,255,.02), 0 12px 40px -12px rgba(0,0,0,.7);
  --mono:'IBM Plex Mono', ui-monospace,'D2Coding',Consolas,monospace;
  --sans:'Pretendard','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕','Noto Sans KR',system-ui,sans-serif;
  --r:10px;
  --btn-ink:#20160a; --btn-ink-2:#1a1206; --seq-ink:#0b0e13;
  --red-deep:#c0453f; --on-red:#fff;
  --scrim-bg:rgba(4,6,10,.6);
  --glow-amber-weak:rgba(255,183,52,.06); --glow-cyan-weak:rgba(79,209,224,.05);
  --focus-ring:rgba(255,183,52,.12); --input-focus:rgba(255,183,52,.1);
  --cited-bg:rgba(255,183,52,.14); --drag-bg:rgba(255,183,52,.05);
  --violet-border:rgba(157,140,255,.35); --cyan-border:rgba(79,209,224,.3);
  /* 대화 화면 표면색 — 답변/thinking/도구카드를 서로, 그리고 페이지 배경과 구분한다. */
  --answer-bg:#171b25; --think-bg:#181630; --tool-bg:#101a20;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f2f4f8; --bg-grain:#e9edf3; --panel:#ffffff; --panel-2:#f4f6fa; --panel-3:#e8ecf3;
  --line:#d3dae4; --line-soft:#e2e7ee;
  --ink:#1a2230; --ink-2:#3d4960; --ink-3:#64748b; --ink-4:#a8b2c4;
  --amber:#b45309; --amber-dim:#92400e; --cyan:#0c6a80; --cyan-dim:#0a5261;
  --green:#178a52; --red:#d24545; --violet:#6553c9;
  --shadow:0 1px 0 rgba(0,0,0,.02), 0 12px 32px -14px rgba(30,40,60,.25);
  --btn-ink:#fff8ec; --btn-ink-2:#fff8ec; --seq-ink:#ffffff;
  --red-deep:#b23636; --on-red:#ffffff;
  --scrim-bg:rgba(15,20,30,.35);
  --glow-amber-weak:rgba(181,123,0,.05); --glow-cyan-weak:rgba(12,127,145,.05);
  --focus-ring:rgba(181,123,0,.15); --input-focus:rgba(181,123,0,.12);
  --cited-bg:rgba(181,123,0,.12); --drag-bg:rgba(181,123,0,.06);
  --violet-border:rgba(101,83,201,.35); --cyan-border:rgba(12,127,145,.3);
  --answer-bg:#ffffff; --think-bg:#f5f3ff; --tool-bg:#f0fafc;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
/* ponytail: 폰트 크기 확대는 zoom 한 줄로 한다 — 이 시트의 font-size 109개가 전부 하드코딩
   px 라 body 만 키워선 안 커지고, 109개를 곱하면 글자만 커져 고정폭 박스를 넘친다.
   zoom 은 박스까지 같이 키워 비율이 유지된다. 더 키우려면 --z 만 올린다(1.0 = 원래 크기).
   ★ zoom 아래에서 100vh 는 화면보다 --z 배 길어진다 → 뷰포트 단위는 전부 --z 로 나눈다.
     안 나누면 body{overflow:hidden} 에 아래쪽이 잘려 사이드바 하단 버튼이 화면 밖으로 나간다. */
:root{--z:1.15; --vh:calc(100vh / var(--z)); zoom:var(--z)}
#login,#app{position:relative;z-index:1}
body{
  margin:0; font-family:var(--sans); font-size:14px; line-height:1.55; color:var(--ink);
  background:
    radial-gradient(1200px 600px at 88% -10%, var(--glow-amber-weak), transparent 60%),
    radial-gradient(1000px 700px at -8% 110%, var(--glow-cyan-weak), transparent 55%),
    var(--bg);
  overflow:hidden;
}
button{font-family:inherit}
code,.mono{font-family:var(--mono)}
.hidden{display:none !important}

/* ── login ─────────────────────────────────────────────────────────── */
/* 박스 없는 폼. 세로 여백은 grid gap 하나가 전부다 — 아래 gap 값만 바꾸면 전체 간격이 움직인다. */
/* 항상 정중앙. min-height 라 창이 작아지면 늘어나고, 넘치면 이 안에서 스크롤된다
   (body 가 overflow:hidden 이라 여기서 auto 를 줘야 잘리지 않는다). */
.login{min-height:var(--vh);display:grid;place-items:center;padding:24px;overflow:auto}
.login-card{width:min(380px,92vw);display:grid;gap:18px}
.login .brand{display:flex;align-items:center;gap:11px}
.login h1{font-size:19px;margin:0;letter-spacing:.2px}
.login h1 small{font-size:.6em;font-weight:400;color:var(--ink-3);letter-spacing:.5px}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-3);margin-bottom:6px;font-family:var(--mono)}
.field input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  padding:11px 13px;font-size:14px;outline:none}
.field input:focus{border-color:var(--amber-dim);box-shadow:0 0 0 3px var(--focus-ring)}
.btn{width:100%;border:none;border-radius:8px;padding:12px 14px;font-size:14px;font-weight:600;cursor:pointer;
  background:var(--amber);color:var(--btn-ink)}
.btn:active{transform:translateY(1px)}
.login .err{color:var(--red);font-size:12.5px;min-height:16px;font-family:var(--mono)}

/* ── app shell (left sidebar + views) ──────────────────────────────── */
#app{height:var(--vh);display:flex;min-height:0}
.sidebar{flex:0 0 280px;width:280px;display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,var(--panel),var(--bg-grain));border-right:1px solid var(--line)}
.sb-nav{display:flex;flex-direction:column;gap:2px;padding:16px 10px 10px}
.sb-new{display:flex;align-items:center;gap:9px;padding:9px 12px;margin-bottom:4px;border:1px dashed var(--line);border-radius:9px;background:transparent;color:var(--ink);cursor:pointer;font-size:13px;font-weight:600;transition:.15s}
.sb-new:hover{border-color:var(--amber-dim);color:var(--amber);background:var(--panel-2)}
.sb-item{display:flex;align-items:center;gap:9px;padding:8px 12px;border:none;border-radius:8px;background:transparent;color:var(--ink-2);font-size:13px;cursor:pointer;text-align:left;transition:.15s}
.sb-item:hover{background:var(--panel-2);color:var(--ink)}
.sb-item.active{background:var(--panel-2);color:var(--amber)}
/* 하단 버튼 3개는 같은 높이·같은 모서리로 맞춘다 — 🧠 는 아이콘, KO 는 글자라 그냥 두면 폭·정렬이 어긋난다. */
.icon-btn{height:28px;min-width:28px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink-2);border-radius:8px;
  padding:0 9px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.5px}
.icon-btn:hover{border-color:var(--amber-dim);color:var(--amber)}
.icon-btn.off{opacity:.4}          /* thinking 숨김 상태 */
.sb-hist{flex:1;min-height:0;display:flex;flex-direction:column;border-top:1px solid var(--line-soft);padding-top:8px}
.sb-sec{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-4);padding:4px 18px 6px}
/* 한 줄: 토글은 왼쪽, 로그아웃은 margin-left:auto 로 오른쪽 끝에 붙는다. */
.sb-foot{border-top:1px solid var(--line-soft);padding:10px 12px;display:flex;align-items:center;gap:6px}
/* 로그아웃은 토글이 아니라 행동이다 — 테두리·배경을 빼서 시각적으로 갈라놓고 오른쪽 끝에 붙인다. */
.sb-foot .logout{margin-left:auto;border-color:transparent;background:transparent;color:var(--ink-3)}
.sb-foot .logout:hover{border-color:var(--red);background:var(--panel-2);color:var(--red)}
.views{flex:1;min-width:0;min-height:0;position:relative}
.view{display:none;height:100%}
.view.active{display:block}
.convs{flex:1;overflow:auto;padding:2px 10px 14px}
.conv{position:relative;padding:9px 12px 9px 14px;border:1px solid var(--line-soft);border-radius:9px;margin-bottom:7px;cursor:pointer;background:var(--panel);transition:.15s}
.conv::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:3px;background:transparent}
.conv:hover{border-color:var(--line)}
.conv.active{border-color:var(--amber-dim);background:var(--panel-2)}
.conv.active::before{background:var(--amber);box-shadow:0 0 10px -1px var(--amber)}
/* padding-right 는 우측 ⋯ 버튼 자리다. 버튼 하나뿐이라 제목이 쓸 폭이 그만큼 넓어졌다. */
.conv .t{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:22px}
/* ⋯ 는 흐리게 항상 보인다 — opacity:0 이면 메뉴를 연 채 마우스가 벗어날 때 버튼이 사라진다. */
.conv .conv-acts{position:absolute;right:4px;top:50%;transform:translateY(-50%);display:flex;opacity:.35;transition:.12s}
.conv:hover .conv-acts{opacity:1}
.conv .conv-acts button{border:none;background:transparent;color:var(--ink-3);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px}
.conv .conv-acts .more:hover{color:var(--amber)}
/* 대화 카드 팝업 메뉴 — body 직속(.convs 의 overflow 를 벗어나야 한다), 위치는 JS 가 잡는다. */
.conv-menu{position:fixed;z-index:60;min-width:132px;padding:4px;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow)}
.cm-item{display:block;width:100%;text-align:left;border:none;background:transparent;color:var(--ink-2);
  border-radius:6px;padding:7px 10px;cursor:pointer;font-size:12px;font-family:inherit}
.cm-item:hover{background:var(--panel-2);color:var(--ink)}
.cm-item.danger:hover{color:var(--red)}
.conv-search{margin:0 12px 8px;padding:7px 10px;width:calc(100% - 24px);background:var(--bg-grain);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:var(--mono);font-size:12px}
.conv-search:focus{border-color:var(--amber-dim);outline:none}
/* 케이스 그룹 = 헤더 + 그 케이스의 대화들을 감싸는 박스. */
.conv-group{border:1px solid var(--line-soft);border-radius:10px;background:var(--panel-2);
  padding:8px;margin-bottom:10px}
.cg-head{display:flex;align-items:center;gap:6px;margin-bottom:7px;padding:0 3px}
.cg-name{flex:1;min-width:0;font-family:var(--mono);font-size:10px;letter-spacing:.8px;text-transform:uppercase;
  color:var(--cyan-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cg-act{flex:0 0 auto;border:1px solid var(--line);background:transparent;color:var(--ink-3);
  border-radius:6px;padding:2px 8px;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:.5px;line-height:1.5}
.cg-act:hover{border-color:var(--cyan-dim);color:var(--cyan)}
/* 박스 안에서는 카드 사이 여백만 필요하고 마지막 카드 아래 여백은 박스 padding 이 맡는다. */
.conv-group .conv:last-child{margin-bottom:0}
.conv-title-input{width:100%;background:var(--bg-grain);border:1px solid var(--amber-dim);border-radius:6px;color:var(--ink);font-size:13px;padding:3px 6px;font-family:inherit}

/* ── main ──────────────────────────────────────────────────────────── */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;height:100%}
.case-dropdown{position:absolute;top:50px;left:20px;z-index:40;min-width:290px;max-height:340px;overflow:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);padding:6px}
.cd-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border-radius:8px;cursor:pointer}
.cd-item:hover{background:var(--panel-3)}
.cd-item.current{border:1px solid var(--amber-dim);background:var(--panel-2)}
.cd-item .cd-name{font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-item .cd-id{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);flex:0 0 auto}
.transcript{flex:1;overflow:auto;padding:26px 0}
.wrap{max-width:940px;margin:0 auto;padding:0 24px}
.welcome{color:var(--ink-3);text-align:center;margin-top:12vh;font-family:var(--mono);font-size:13px;line-height:1.9}
.welcome .big{font-family:var(--sans);color:var(--ink-2);font-size:16px;margin-bottom:8px}

.skill-start-event{display:flex;align-items:center;gap:6px;width:fit-content;margin:0 0 10px;
  border:1px solid var(--cyan-dim);border-radius:999px;background:var(--panel-2);padding:4px 10px;
  color:var(--ink-3);font-family:var(--mono);font-size:10.5px}
.skill-start-event span,.skill-start-event b{color:var(--cyan)}
.msg{margin-bottom:22px}
.msg .who{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ink-4);margin-bottom:7px;display:flex;align-items:center;gap:8px}
.msg.user{display:flex;flex-direction:column;align-items:flex-end}
.bubble{max-width:76%;width:fit-content;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px 12px 4px 12px;padding:11px 14px;color:var(--ink);white-space:pre-wrap}
/* 글자수에 따라 폭이 늘어난다 — 고정 18×18 이면 'DFAS' 가 넘친다. */
.avatar{height:18px;padding:0 6px;border-radius:5px;background:var(--amber);color:var(--btn-ink-2);
  display:grid;place-items:center;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.5px}
/* 사용자 뱃지는 시안 — DFAS(앰버)와 색으로 갈린다. --seq-ink 는 테마별로 뒤집히는 대비색이라
   다크(밝은 시안)에서는 어두운 글자, 라이트(짙은 시안)에서는 흰 글자가 된다. */
.avatar.you{background:var(--cyan);color:var(--seq-ink)}

/* meta cards */
.card{border:1px solid var(--line);border-radius:10px;margin-bottom:9px;overflow:hidden;background:var(--panel)}
.card>summary{list-style:none;cursor:pointer;padding:9px 12px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px;user-select:none}
.card>summary::-webkit-details-marker{display:none}
.card>summary .sub{margin-left:auto;color:var(--ink-4);font-size:10.5px}
.thinking-card{border-color:var(--violet-border);background:var(--think-bg)}
.thinking-card>summary{color:var(--violet)}
.think-body{padding:0 12px 11px;max-height:280px;overflow:auto}
.think-text{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:pre-wrap;line-height:1.6}
:root[data-hide-thinking="1"] .thinking-card{display:none}
.thinking-card.streaming>summary::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--violet);animation:th-pulse 1s ease-in-out infinite}
@keyframes th-pulse{0%,100%{opacity:.25}50%{opacity:1}}
.thinking-card.done>summary{opacity:.65}
.sys-card{border-color:var(--cyan-border)}
.sys-card>summary{color:var(--cyan)}
.sys-pre{margin:0;padding:0 12px 12px;max-height:320px;overflow:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:pre-wrap}

/* tool cards */
.flow{display:flex;flex-direction:column;gap:8px;margin:2px 0 10px}
.flow:empty{margin:0}
/* inline narration the model emits between tool calls — a light "reasoning step", distinct from the final answer */
.flow-note{color:var(--ink-2);font-size:13px;line-height:1.55;padding:1px 0 1px 12px;border-left:2px solid var(--line);word-break:break-word}
.flow-note>*:first-child{margin-top:0}.flow-note>*:last-child{margin-bottom:0}
.flow-note p{margin:5px 0}
.flow-note code{font-family:var(--mono);font-size:11.5px;background:var(--bg-grain);border:1px solid var(--line-soft);border-radius:5px;padding:1px 5px}
.flow-note .infoid-link{color:var(--cyan);border-bottom:1px dotted var(--cyan-dim);cursor:pointer}
.toolcard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--tool-bg)}
.toolcard.running{border-color:var(--cyan-dim)}
.toolcard.cited{border-color:var(--amber-dim)}
.toolcard.err{border-color:var(--red)}
.tc-head{display:flex;align-items:center;gap:9px;padding:9px 12px;cursor:pointer;user-select:none}
.tc-seq{font-family:var(--mono);font-size:10px;color:var(--seq-ink);background:var(--ink-3);border-radius:5px;padding:1px 6px;font-weight:700}
.toolcard.cited .tc-seq{background:var(--amber)}
.tc-tool{font-family:var(--mono);font-size:12px;color:var(--cyan);font-weight:600}
.tc-view{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.tc-stat{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.tc-stat b{color:var(--ink-2)}
.spin{width:11px;height:11px;border:2px solid var(--line);border-top-color:var(--cyan);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.tc-body{border-top:1px solid var(--line-soft);padding:10px 12px;display:none}
.toolcard.open .tc-body{display:block}
.toolcard.kind-skill{border-color:var(--cyan-dim)}
.toolcard.kind-write{border-color:var(--amber-dim)}
.toolcard.kind-skill .tc-tool,.toolcard.kind-read .tc-tool,.toolcard.kind-write .tc-tool{text-transform:none}
.tc-file-path{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.file-preview{margin:0;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  color:var(--ink-2);font-family:var(--mono);font-size:11.5px;line-height:1.5;background:var(--bg-grain);
  border:1px solid var(--line-soft);border-radius:8px;padding:10px}
.file-preview-note{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:6px}
.file-actions{display:flex;justify-content:flex-end;gap:7px;margin-top:9px}
.file-action{border:1px solid var(--line);border-radius:7px;background:var(--panel-2);color:var(--ink-2);
  padding:5px 9px;font-family:var(--mono);font-size:10.5px;cursor:pointer}
.file-action:hover{border-color:var(--amber-dim);color:var(--ink)}
.file-action:disabled{opacity:.45;cursor:not-allowed}
.args{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.arg{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);background:var(--bg-grain);border:1px solid var(--line-soft);border-radius:6px;padding:2px 8px}
.arg b{color:var(--cyan)}
.tbl-scroll{overflow:auto;max-height:340px;border:1px solid var(--line-soft);border-radius:8px}
table.data{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:11px}
table.data th{position:sticky;top:0;background:var(--panel-3);color:var(--ink-2);text-align:left;padding:6px 9px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:600}
table.data td{padding:5px 9px;border-bottom:1px solid var(--line-soft);color:var(--ink-2);white-space:nowrap;max-width:280px;overflow:hidden;text-overflow:ellipsis}
td.infoid{color:var(--cyan);cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
td.infoid:hover{color:var(--amber)}
/* groupBy/groupBucket 집계 결과의 히스토그램 막대(count 컬럼) */
td.hbar-cell{overflow:visible}
td.hbar-cell .hbar{display:inline-block;height:9px;border-radius:2px;background:var(--amber);vertical-align:middle;margin-right:7px}
td.hbar-cell .hbar-num{font-variant-numeric:tabular-nums;color:var(--ink)}
.badge{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;border-radius:5px;padding:1px 7px}
.badge.cited{background:var(--cited-bg);color:var(--amber)}

/* answer */
.answer{background:var(--answer-bg);border:1px solid var(--line);border-radius:4px 12px 12px 12px;padding:14px 16px}
.answer-body{color:var(--ink);word-break:break-word}
.answer-body>*:first-child{margin-top:0}.answer-body>*:last-child{margin-bottom:0}
.answer-body h1,.answer-body h2,.answer-body h3,.answer-body h4{line-height:1.3;margin:14px 0 8px}
.answer-body h1{font-size:19px}.answer-body h2{font-size:17px}.answer-body h3{font-size:15px}.answer-body h4{font-size:13.5px}
.answer-body p{margin:8px 0}
.answer-body ul,.answer-body ol{margin:8px 0;padding-left:22px}
.answer-body li{margin:3px 0}
.answer-body code{font-family:var(--mono);font-size:12px;background:var(--bg-grain);border:1px solid var(--line-soft);border-radius:5px;padding:1px 5px}
.answer-body pre{background:var(--bg-grain);border:1px solid var(--line);border-radius:9px;padding:12px;overflow:auto}
.answer-body pre code{border:none;background:none;padding:0}
.answer-body blockquote{margin:8px 0;padding:2px 14px;border-left:3px solid var(--line);color:var(--ink-2)}
.answer-body table{border-collapse:collapse;width:100%;margin:10px 0;font-size:12.5px}
.answer-body th,.answer-body td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.answer-body th{background:var(--panel-3);font-family:var(--mono);font-size:11px}
.caret{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.answer-foot{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);margin-top:10px;display:flex;gap:14px;flex-wrap:wrap}
.answer-foot b{color:var(--ink-3)}

/* composer */
.composer{border-top:1px solid var(--line);padding:14px 24px 18px}
.composer .wrap{display:flex;flex-direction:column;gap:6px}
.composer-entry{position:relative;display:flex;flex-direction:column;gap:6px}
.skill-menu{position:absolute;z-index:45;left:0;right:48px;bottom:calc(100% + 7px);max-height:310px;overflow:auto;
  background:var(--panel-2);border:1px solid var(--line);border-radius:11px;
  box-shadow:var(--shadow);padding:6px}
.skill-option{display:block;width:100%;border:1px solid transparent;border-radius:8px;background:transparent;
  color:var(--ink);padding:9px 11px;text-align:left;cursor:pointer}
.skill-option:hover,.skill-option.active{background:var(--panel-3);border-color:var(--line-soft)}
.skill-option.unsupported{cursor:not-allowed;opacity:.58}
.skill-option.unsupported:hover{background:transparent;border-color:transparent}
.skill-option .skill-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.skill-option .skill-name{font-family:var(--mono);font-size:12px;color:var(--cyan);font-weight:600}
.skill-option.unsupported .skill-name{color:var(--ink-3)}
.skill-option .skill-state{font-family:var(--mono);font-size:9.5px;color:var(--amber);white-space:nowrap}
.skill-option .skill-desc,.skill-option .skill-reason{display:block;font-size:11.5px;line-height:1.4;color:var(--ink-3);margin-top:3px}
.skill-option .skill-reason{color:var(--amber)}
.skill-menu-state{font-family:var(--mono);font-size:11px;color:var(--ink-4);padding:10px 11px}
.skill-badge-row{display:flex;align-items:center}
.skill-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;border:1px solid var(--cyan-dim);border-radius:9px;
  background:var(--panel-2);color:var(--cyan);padding:4px 7px 4px 9px;font-family:var(--mono);font-size:10.5px}
.skill-chip b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skill-chip .skill-once,.skill-chip .skill-status{color:var(--ink-4);font-size:9.5px}
.skill-chip.active .skill-status{color:var(--green)}
.skill-chip.starting,.skill-chip.stopping{opacity:.72}
.skill-chip-remove{width:20px;height:20px;border:none;border-radius:5px;background:transparent;color:var(--ink-3);
  cursor:pointer;font-size:12px;line-height:20px;padding:0}
.skill-chip-remove:hover{background:var(--panel-3);color:var(--ink)}
.skill-chip-remove:disabled{cursor:default;opacity:.45;background:transparent;color:var(--ink-4)}
.input-shell{display:flex;gap:10px;align-items:flex-end;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 8px 8px 14px}
.input-shell:focus-within{border-color:var(--amber-dim);box-shadow:0 0 0 3px var(--input-focus)}
.input-shell textarea{flex:1;resize:none;border:none;outline:none;background:transparent;color:var(--ink);font-size:14px;font-family:var(--sans);max-height:160px;padding:5px 0;line-height:1.5}
.send{width:38px;height:38px;flex:0 0 auto;border:none;border-radius:10px;cursor:pointer;font-size:15px;
  background:var(--amber);color:var(--btn-ink-2)}
.send:disabled{opacity:.45;cursor:default}
.send.stop{background:var(--red);color:var(--on-red)}
.hint{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);display:flex;justify-content:space-between}
/* composer context row (agent indicator + inline case selector) */
.composer-context{position:relative;display:flex;align-items:center;gap:10px;padding:0 4px 2px}
.agent-ind{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.agent-ind i{width:6px;height:6px;border-radius:50%;background:var(--cyan)}
.composer-case{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line-soft);border-radius:8px;padding:3px 9px;cursor:pointer;color:var(--ink-2);font-family:var(--mono);font-size:11px}
.composer-case:hover{border-color:var(--amber-dim)}
/* 대화가 시작되면 모델·케이스 칩을 잠근다(app.js syncComposerLocks). disabled 이면 클릭 이벤트가
   아예 안 나가므로 드롭다운도 열리지 않는다. 보기에도 눌리지 않는다는 걸 드러내야 한다 —
   캐럿을 자물쇠로 바꾸고 hover 강조를 끈다. */
.composer-case:disabled{cursor:default;opacity:.72}
.composer-case:disabled:hover{border-color:var(--line-soft)}
.composer-case.locked .cs-caret{visibility:hidden;position:relative}
.composer-case.locked .cs-caret::after{content:'🔒';visibility:visible;position:absolute;left:0;top:0;font-size:9px}
.composer-case .cc-k{color:var(--ink-4);text-transform:uppercase;letter-spacing:.8px;font-size:9px}
.composer-case b{color:var(--cyan);font-weight:600}
.composer-case .cs-caret{color:var(--ink-4);font-size:9px}
.composer-scope{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-4)}
#composerCaseDropdown{top:auto;bottom:calc(100% + 6px);left:0}
#exportDropdown{top:auto;bottom:calc(100% + 6px);right:4px;left:auto;min-width:200px}
/* 모델 드롭다운. 다른 두 개는 .composer-context 에 앵커되지만(각각 left:0 / right:4 로 안 겹침) 모델
   칩은 케이스 칩 뒤에 오고 그 폭이 케이스명에 따라 변해서 컨테이너 기준 고정 오프셋을 쓸 수 없다.
   → 칩+드롭다운을 .cc-wrap(relative)으로 감싸 자기 칩에 앵커한다. bottom 기준으로 위로 열어야
   한다: 오버라이드가 없으면 .case-dropdown 의 top:50px 을 받아 컴포저 아래로 열리고 뷰포트 밖으로
   잘린다(2026-07-28 프로덕션에서 Gemma4 항목이 실제로 잘렸다). */
.cc-wrap{position:relative;display:inline-flex}
#composerCoreDropdown{top:auto;bottom:calc(100% + 6px);left:0;min-width:320px}
/* .cd-item 은 케이스 목록용(긴 이름 + 짧은 ID)이라 이름이 줄어든다. 모델은 역할이 반대(짧은 이름 +
   긴 설명)이므로 이름은 고정, 설명이 줄어들게 뒤집는다 — 안 그러면 선택 항목이 "Hai…" 로 잘린다. */
#composerCoreDropdown .cd-name{flex:0 0 auto}
#composerCoreDropdown .cd-id{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right}

/* modal / scrim / toasts */
.scrim{position:fixed;inset:0;background:var(--scrim-bg);display:grid;place-items:center;z-index:50}
.modal{width:min(680px,94vw);max-height:82vh;overflow:auto;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.modal-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel-2)}
.modal-head h3{margin:0;font-size:14px}
.modal-head .x{margin-left:auto;border:none;background:transparent;color:var(--ink-3);cursor:pointer;font-size:18px}
.modal-body{padding:16px 18px}
.kv{font-family:var(--mono);font-size:12px}
.kv .row{display:flex;gap:12px;padding:4px 0;border-bottom:1px solid var(--line-soft)}
.kv .k{color:var(--ink-3);min-width:150px}
.kv .v{color:var(--ink);word-break:break-all}
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:60}
.toast{background:var(--panel-3);border:1px solid var(--line);border-radius:9px;padding:9px 14px;font-size:12.5px;color:var(--ink-2);box-shadow:var(--shadow)}
.toast.err{border-color:var(--red);color:var(--red)}
.toast.ok{border-color:var(--green);color:var(--green)}

/* ── cases view ────────────────────────────────────────────────────── */
.rail{padding-top:8px}
.cases-wrap{height:100%;overflow:auto;padding:22px 26px 40px;max-width:1120px;margin:0 auto}
.cases-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.cases-head h2{margin:0;font-size:18px}
.cases-sub{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:5px}
.cases-sub b{color:var(--cyan)}
.cases-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.case-core-picker{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:5px 8px 5px 10px;color:var(--ink-3);font-family:var(--mono);font-size:10.5px;white-space:nowrap}
.case-core-picker select{border:0;background:var(--panel-2);color:var(--cyan);border-radius:6px;padding:4px 24px 4px 7px;font-family:var(--mono);font-size:11px;outline:none;cursor:pointer}
.case-core-picker select:focus-visible{box-shadow:0 0 0 1px var(--cyan-dim)}
.btn-amber{border:none;border-radius:9px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;background:linear-gradient(180deg,var(--amber),var(--amber-dim));color:var(--btn-ink);box-shadow:0 5px 16px -8px var(--amber)}
.btn-amber:active{transform:translateY(1px)}
.btn-amber:disabled{opacity:.5;cursor:default;box-shadow:none}
.ghost-btn{border:1px solid var(--line);background:var(--panel);color:var(--ink-2);border-radius:9px;padding:9px 13px;cursor:pointer;font-size:13px}
.ghost-btn:hover{border-color:var(--amber-dim);color:var(--amber)}

.upload-panel{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:16px;margin-bottom:18px}
.upload-target{margin-bottom:11px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--amber) 38%,var(--line));border-radius:8px;background:color-mix(in srgb,var(--amber) 8%,transparent);color:var(--ink-2);font-size:12px;line-height:1.45}
.upload-drop{border:1.5px dashed var(--line);border-radius:10px;padding:22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;transition:.15s}
.upload-drop.drag{border-color:var(--amber);background:var(--drag-bg)}
.upload-hint{color:var(--ink-2);font-size:13px}
.upload-hint code{font-family:var(--mono);font-size:11.5px;color:var(--cyan);background:var(--bg-grain);border:1px solid var(--line-soft);border-radius:5px;padding:1px 6px}
.upload-picked{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.upload-picked b{color:var(--ink)}
.upload-progress{margin-top:14px}
.pbar{height:8px;background:var(--bg-grain);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pbar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber-dim),var(--amber));transition:width .2s}
.upload-status{margin-top:7px;font-size:11.5px;color:var(--ink-2)}

.case-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.case-card{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel-2),var(--panel));padding:15px;display:flex;flex-direction:column;gap:9px}
.case-card .cc-top{display:flex;align-items:center;gap:9px}
.case-card .cc-name{font-size:14.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case-card .cc-status{margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:3px 8px;font-family:var(--mono);font-size:10px;color:var(--ink-3);white-space:nowrap}
.case-card .cc-status.ready{border-color:color-mix(in srgb,var(--green) 42%,var(--line));color:var(--green)}
.case-card .cc-guide{font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px -1px var(--green);flex:0 0 auto}
.status-dot.na{background:var(--ink-4);box-shadow:none}
.case-card .cc-meta{font-family:var(--mono);font-size:11px;display:flex;flex-direction:column;gap:3px}
.case-card .cc-meta .kv{display:flex;gap:8px}
.case-card .cc-meta .kv .k{color:var(--ink-4);min-width:66px}
.case-card .cc-meta .kv .v{color:var(--ink-2);word-break:break-all}
.case-card .cc-workflow,.case-card .cc-foot{display:flex;gap:8px;margin-top:4px;flex-wrap:wrap}
.cc-btn{flex:1;border:1px solid var(--line);background:var(--panel-3);color:var(--ink-2);border-radius:8px;padding:7px;cursor:pointer;font-size:12px}
.cc-btn:hover{border-color:var(--cyan-dim);color:var(--cyan)}
.cc-btn.primary{border-color:color-mix(in srgb,var(--cyan) 36%,var(--line));color:var(--cyan)}
.cc-btn.amber{border-color:color-mix(in srgb,var(--amber) 40%,var(--line));color:var(--amber)}
.cc-btn:disabled{opacity:.45;cursor:not-allowed}
.cc-btn:disabled:hover{border-color:var(--line);color:var(--ink-2)}
.cc-btn.danger:hover{border-color:var(--red);color:var(--red)}
.cases-empty{grid-column:1/-1;text-align:center;color:var(--ink-3);font-family:var(--mono);font-size:13px;padding:44px;line-height:1.9}

/* strong delete-confirm + case picker (reuse .modal/.scrim) */
.confirm-danger .modal-head h3{color:var(--red)}
.confirm-input{width:100%;margin-top:12px;background:var(--bg-grain);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px 12px;font-family:var(--mono);font-size:12px;outline:none}
.confirm-input:focus{border-color:var(--red)}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.modal-actions button{border-radius:8px;padding:8px 15px;cursor:pointer;font-size:13px}
.modal-actions .cancel{border:1px solid var(--line);background:var(--panel-3);color:var(--ink-2)}
.modal-actions .confirm{border:none;font-weight:600;background:linear-gradient(180deg,var(--red),var(--red-deep));color:var(--on-red)}
.modal-actions .confirm.amber{background:linear-gradient(180deg,var(--amber),var(--amber-dim));color:var(--btn-ink)}
.modal-actions .confirm:disabled{opacity:.4;cursor:default}
.picker-list{display:flex;flex-direction:column;gap:8px}
.picker-item{border:1px solid var(--line);border-radius:9px;padding:11px 13px;cursor:pointer;background:var(--panel)}
.picker-item:hover{border-color:var(--amber-dim);background:var(--panel-2)}
.picker-item .pn{font-size:13.5px;color:var(--ink)}
.picker-item .pm{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:3px}

/* ── file tree ── (VS Code/Primer/Carbon-informed: 16px/level indent, fixed chevron col, mono icons) */
.tree-body{margin-top:4px}
/* scope to the tree container so it never bleeds onto the .cc-btn.tree card button */
#treeBody .tree{font-family:var(--mono);font-size:13px}
#treeBody .tree-dir{border:none;margin:0}
#treeBody .tree-dir > summary{list-style:none}
#treeBody .tree-dir > summary::-webkit-details-marker{display:none}

/* row: [8px][tw 16px][icon 16px][name]…[meta] — indent = depth × 16px via --d */
#treeBody .tree-row{
  display:flex;align-items:center;gap:7px;
  min-height:26px;padding:0 10px 0 calc(8px + var(--d,0)*16px);
  border-radius:6px;line-height:1.2;
}
#treeBody summary.tree-row{cursor:pointer;user-select:none}
#treeBody .tree-row:hover{background:var(--panel-2)}

/* chevron column — fixed 16px on EVERY row; empty on files so labels align */
#treeBody .tree-row .tw{flex:0 0 16px;display:flex;align-items:center;justify-content:center}
#treeBody .tree-row .tw::before{
  content:"▸";color:var(--ink-3);font-size:12px;line-height:1;
  display:inline-block;transition:transform .12s ease;
}
#treeBody .tree-row.file .tw::before{content:""}
#treeBody details[open] > summary .tw::before{transform:rotate(90deg)}
#treeBody summary.tree-row:hover .tw::before{color:var(--ink-2)}

/* icons — 16×16 monochrome CSS shapes tinted via currentColor */
#treeBody .tree-row .ti{flex:0 0 16px;height:16px;position:relative}
#treeBody .ti.dir{color:var(--cyan-dim)}
#treeBody .ti.dir::before{content:"";position:absolute;left:1px;top:3px;width:6px;height:3px;
  background:currentColor;border-radius:1px 1px 0 0}                    /* folder tab  */
#treeBody .ti.dir::after{content:"";position:absolute;left:1px;top:5px;width:13px;height:8px;
  background:currentColor;border-radius:1.5px}                          /* folder body */
#treeBody details[open] > summary .ti.dir{color:var(--cyan)}
#treeBody .ti.doc{color:var(--ink-3)}
#treeBody .ti.doc::before{content:"";position:absolute;left:3px;top:1px;width:8px;height:12px;
  border:1.5px solid currentColor;border-radius:2px}                    /* page outline */
#treeBody .ti.lock{color:var(--ink-4)}
#treeBody .ti.lock::before{content:"";position:absolute;left:4px;top:2px;width:7px;height:6px;
  border:1.5px solid currentColor;border-bottom:none;border-radius:4px 4px 0 0} /* shackle */
#treeBody .ti.lock::after{content:"";position:absolute;left:3px;top:7px;width:10px;height:7px;
  background:currentColor;border-radius:1.5px}                          /* lock body */

/* names */
#treeBody .tree-row .tn{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#treeBody .tree-row .tn.folder{color:var(--cyan)}
#treeBody .tree-row.file{cursor:pointer}
#treeBody .tree-row.file .tn{color:var(--ink)}

/* locked ("na") — readable + clearly locked, never "broken" */
#treeBody .tree-row.file.na{cursor:not-allowed}
#treeBody .tree-row.file.na .tn{color:var(--ink-3)}
#treeBody .tree-row.file.na:hover{background:transparent}
#treeBody .tree-row.file.na .tsz{color:var(--ink-4)}

/* right-side meta: folder child-count badge / file size */
#treeBody .tree-row .tct{margin-left:auto;color:var(--ink-4);font-size:10.5px;
  border:1px solid var(--line-soft);border-radius:8px;padding:0 6px;line-height:15px;flex:none}
#treeBody .tree-row .tsz{margin-left:auto;color:var(--ink-3);font-size:11px;flex:none}

/* selection + focus */
#treeBody .tree-row.file.active{background:var(--panel-3);box-shadow:inset 2px 0 0 var(--amber)}
#treeBody .tree-row:focus-visible{outline:1px solid var(--cyan-dim);outline-offset:-1px;background:var(--panel-2)}
.tree-note{color:var(--amber);font-family:var(--mono);font-size:11.5px;margin-bottom:10px}

/* ── citations ── */
.infoid-link{color:var(--cyan);cursor:pointer;border-bottom:1px dashed var(--cyan-dim);font-family:var(--mono);word-break:break-all}
.infoid-link:hover{color:var(--amber);border-color:var(--amber-dim)}
.cite-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cite-chip{font-family:var(--mono);font-size:10.5px;color:var(--cyan);border:1px solid var(--line);border-radius:12px;padding:2px 9px;cursor:pointer}
.cite-chip:hover{border-color:var(--cyan-dim);background:var(--panel-2)}

/* ── view catalog ── */
.cat-grid{display:grid;grid-template-columns:320px 1fr;gap:16px;min-height:0}
.cat-list{display:flex;flex-direction:column;min-height:0}
.cat-list .conv-search{margin:0 0 8px;width:100%}
.cat-items{overflow:auto;max-height:calc(var(--vh) - 240px);border:1px solid var(--line-soft);border-radius:10px;padding:6px}
.cat-items .picker-item.sel{border-color:var(--amber-dim);background:var(--panel-2)}
.cat-detail{border:1px solid var(--line-soft);border-radius:10px;padding:16px;overflow:auto;max-height:calc(var(--vh) - 240px)}
.cat-title{font-size:16px;margin-bottom:10px}
.cat-title .cat-en{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:8px}
.cat-cols{max-height:none;margin-top:12px}
.toolcard.flash{outline:1px solid var(--amber);box-shadow:0 0 14px -4px var(--amber)}

/* ── timeline ── */
.tl-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:6px 0 10px}
.tl-ctl{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.tl-date{width:120px;background:var(--bg-grain);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:var(--mono);font-size:12px;padding:6px 9px}
.tl-date:focus{border-color:var(--amber-dim);outline:none}
.tl-kw{margin:0;width:200px}
.tl-views-panel{display:flex;flex-wrap:wrap;gap:6px 16px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:10px;margin-bottom:10px;background:var(--panel-2)}
.tl-vchk{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.tl-vchk-acts{display:flex;gap:6px;width:100%;margin-top:4px}
.tl-status{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tl-chip{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);border:1px solid var(--line-soft);border-radius:10px;padding:2px 9px}
.tl-chip.load{color:var(--ink-4)}
.tl-chip.warn{color:var(--amber);border-color:var(--amber-dim)}
.tl-chip.err{color:var(--ink-4);opacity:.7;text-decoration:line-through}
.tl-body{max-width:1000px}
.tl-day{margin-bottom:14px}
.tl-dayhdr{position:sticky;top:0;background:var(--bg);font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--cyan-dim);padding:6px 0 6px 8px;border-bottom:1px solid var(--line-soft);z-index:1}
.tl-ev{display:flex;align-items:center;gap:10px;padding:6px 10px;border-left:2px solid var(--line);margin-left:8px;font-size:12.5px}
.tl-ev.link{cursor:pointer}
.tl-ev.link:hover{background:var(--panel-2);border-left-color:var(--amber)}
.tl-ev .tl-time{font-family:var(--mono);font-size:11px;color:var(--ink-3);flex:0 0 62px}
.tl-ev .tl-badge{font-family:var(--mono);font-size:10px;color:var(--cyan);border:1px solid var(--cyan-border);border-radius:8px;padding:1px 7px;flex:0 0 auto;white-space:nowrap}
.tl-ev .tl-sum{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.tl-ev .tl-col{font-family:var(--mono);font-size:10px;color:var(--ink-4);flex:0 0 auto}
.tl-ev .tl-info{font-family:var(--mono);font-size:10.5px;color:var(--amber-dim);flex:0 0 auto}
.tl-ev.link:hover .tl-info{color:var(--amber)}