/* Agora — 다크를 기본으로 한다. 보스는 밤에도 쓰신다. */
:root{
  /* 옅은 보라. 바탕에도 보라를 아주 조금 섞어 색이 겉돌지 않게 한다. */
  --bg:#17151c; --panel:#1f1c26; --panel-2:#272231; --line:#3a3347;
  --fg:#ebe7f2; --muted:#9a92ab; --accent:#b49df0; --accent-fg:#1a1620;
  --user:#342c45; --danger:#d4818f;
  --radius:14px; --pad:6px; --btn:40px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#faf8fd; --panel:#ffffff; --panel-2:#f3effa; --line:#e4ddf2;
    --fg:#241f2e; --muted:#6d6680; --accent:#7c5cd6; --accent-fg:#ffffff;
    --user:#ece6f9; --danger:#b4455c;
    color-scheme: light;
  }
}
*{box-sizing:border-box}

/* 🔴 **이 줄을 지우지 마십시오.**
 *
 * HTML 의 `hidden` 속성은 브라우저 기본 스타일 `[hidden]{display:none}`
 * 으로 동작한다. 그런데 아래의 `.login{display:grid}`,
 * `.ask{display:grid}`, `.btn.stop{display:grid}` 같은 **클래스 선택자가
 * 우선순위가 높아 그것을 덮어쓴다.**
 *
 * 그러면 `el.hidden = true` 로 숨긴 요소가 **화면에서는 그대로 보인다** —
 * 로그인 카드와 확인창과 본체가 한꺼번에 겹쳐 보인다(2026-10-16 실제 증상).
 *
 * ⚠️ JS 로 `el.hidden` 을 읽으면 `true` 가 나오므로 **테스트가 통과한다.**
 *    속성이 아니라 `getComputedStyle(el).display` 를 봐야 잡힌다.
 */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:15px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo",
       "Malgun Gothic",system-ui,sans-serif;
  overscroll-behavior:none;
}
button{font:inherit; color:inherit}
.muted{color:var(--muted)} .tiny{font-size:12px}
.err{color:var(--danger); font-size:13px}

/* 버튼 */
.btn{
  background:var(--panel-2); border:1px solid var(--line); color:var(--fg);
  border-radius:10px; padding:8px 14px; cursor:pointer; transition:.12s;
}
.btn:hover{background:var(--line)}
.btn:disabled{opacity:.4; cursor:default}
.btn.primary{background:var(--accent); color:var(--accent-fg); border-color:transparent; font-weight:600}
.btn.ghost{background:transparent}
.btn.wide{width:100%}
.btn.icon{padding:7px 10px; background:transparent; border-color:transparent; font-size:16px}
.btn.icon:hover{background:var(--panel-2)}
.btn.danger:hover{background:var(--danger); color:#fff}
.btn.tiny{padding:4px 9px; font-size:12px}

/* 로그인 */
.login{position:fixed; inset:0; display:grid; place-items:center; padding:24px}
.login-card{
  background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:40px 36px; text-align:center; max-width:360px; width:100%;
}
.login-card h1{margin:0 0 6px; font-size:28px; letter-spacing:-.02em}
.login-card p{margin:0 0 24px}
#gbtn{display:flex; justify-content:center; min-height:44px}

/* 레이아웃 */
.app{display:flex; height:100%}
.side{
  width:270px; flex:0 0 270px; background:var(--panel);
  border-right:1px solid var(--line); display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);
}
.side-head{padding:14px}
.session-list{flex:1; overflow-y:auto; padding:0 10px 10px}
.side-foot{
  padding:12px 14px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
}
.sess{
  padding:9px 12px; border-radius:10px; cursor:pointer; margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px;
}
.sess:hover{background:var(--panel-2)}
.sess.on{background:var(--panel-2); font-weight:600}
.sess .sz{float:right; font-size:11px; color:var(--muted); font-weight:400}

.main{flex:1; display:flex; flex-direction:column; min-width:0}
.top{
  display:flex; align-items:center; gap:6px; padding:10px 14px;
  border-bottom:1px solid var(--line); background:var(--bg);
  padding-top:calc(10px + env(safe-area-inset-top,0px));
}
#menu{display:none}
.title{flex:1; margin:0; font-size:15px; font-weight:600;
       white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* 대화 */
.thread{flex:1; overflow-y:auto; padding:24px 18px 8px; scroll-behavior:smooth}
.turn{max-width:760px; margin:0 auto 26px}
.turn.me{display:flex; justify-content:flex-end}
.bubble{
  background:var(--user); padding:11px 15px; border-radius:16px;
  max-width:82%; white-space:pre-wrap; word-break:break-word;
}
.ans{word-break:break-word}
.ans > :first-child{margin-top:0}
.ans > :last-child{margin-bottom:0}
.ans h1,.ans h2,.ans h3{font-size:1.08em; margin:1.3em 0 .5em}
.ans p{margin:0 0 .85em}
.ans ul,.ans ol{margin:0 0 .85em; padding-left:1.3em}
.ans li{margin:.25em 0}
.ans code{background:var(--panel-2); padding:1px 6px; border-radius:5px; font-size:.9em}
.ans pre{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:14px; overflow-x:auto; position:relative; margin:0 0 .85em;
}
.ans pre code{background:none; padding:0; font-size:13px; line-height:1.55}
.copy{
  position:absolute; top:8px; right:8px; opacity:0; transition:.15s;
  font-size:11px; padding:3px 8px;
}
.ans pre:hover .copy{opacity:1}
.ans table{border-collapse:collapse; margin:0 0 .85em; display:block; overflow-x:auto}
.ans th,.ans td{border:1px solid var(--line); padding:7px 11px; text-align:left}
.ans th{background:var(--panel-2)}
.ans blockquote{border-left:3px solid var(--line); margin:0 0 .85em; padding-left:14px; color:var(--muted)}
.ans img{max-width:100%; border-radius:10px}
.shot{max-width:min(320px,70%); border-radius:12px; margin-bottom:8px; display:block}

/* 답변 경로 */
.trace{margin-top:10px}
.trace summary{cursor:pointer; color:var(--muted); font-size:13px; list-style:none}
.trace summary::-webkit-details-marker{display:none}
.trace summary::before{content:"\25B8  "; font-size:11px}
.trace[open] summary::before{content:"\25BE  "}
.trace pre{
  margin:8px 0 0; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:12px; font-size:12.5px; overflow-x:auto;
  white-space:pre; color:var(--muted);
}
.tools{color:var(--muted); font-size:12.5px; margin-top:8px}

/* 다시 답하기 · 고쳐 보내기 — 평소엔 흐리게 두고 턴에 마우스를 올리면
   드러낸다. 항상 진하면 글보다 버튼이 먼저 눈에 든다.
   ⚠️ opacity 로만 흐리게 한다. display:none 으로 숨기면 터치 기기에서
      **영영 못 누른다**(hover 가 없다). */
.acts{margin-top:7px; display:flex; gap:7px; opacity:.35; transition:.15s}
.turn:hover .acts,.acts:focus-within{opacity:1}
.turn.me .acts{justify-content:flex-end}
@media (hover: none){ .acts{opacity:.75} }

/* 입력 */
.composer{
  border-top:1px solid var(--line); padding:12px 18px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px)); background:var(--bg);
}
/* 입력창 높이 손잡이 — 위쪽 테두리 전체가 손잡이다.
   textarea 기본 손잡이는 오른쪽 아래 모서리뿐이라 보내기 버튼과 겹친다. */
.resizer{
  max-width:760px; margin:0 auto 3px; height:9px; cursor:ns-resize;
  display:flex; align-items:center; justify-content:center;
}
.resizer::before{
  content:""; width:46px; height:3px; border-radius:3px;
  background:var(--line); transition:.15s;
}
.resizer:hover::before{background:var(--accent); width:66px}
@media (max-width:780px){ .resizer{display:none} }

.input-row{
  max-width:760px; margin:0 auto; display:flex; align-items:flex-end; gap:8px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius);
  /* ⚠️ **사방을 같게 둔다.** 좌우가 다르면(8px/6px) 버튼이 오른쪽으로
     밀려 테두리를 비집고 나온 것처럼 보인다(2026-10-16 보스 지적). */
  padding:var(--pad);
}
.input-row:focus-within{border-color:var(--accent)}
#input{
  flex:1; background:none; border:0; outline:none; color:var(--fg);
  font:inherit; resize:none; max-height:40vh; line-height:1.6;
  /* 한 줄일 때 높이가 버튼(--btn)과 같아지도록 맞춘다.
     40 = line-height(24) + padding(8+8) */
  padding:8px 4px; min-height:var(--btn);
}
.btn.send,.btn.stop{
  background:var(--accent); color:var(--accent-fg); border:0;
  /* ⚠️ **바깥 모서리에서 패딩을 뺀 값**이어야 테두리 곡선과 나란히 간다.
     고정 10px 을 쓰면 14px 테두리 안에서 모서리가 삐져나온다. */
  border-radius:calc(var(--radius) - var(--pad));
  /* ⚠️ textarea 와 **같은 높이**여야 세로 가운데가 맞는다.
     38px 고정이었을 때 2.6px 어긋나 있었다(실측). */
  width:var(--btn); height:var(--btn); flex:0 0 var(--btn);
  font-size:16px; line-height:1; display:grid; place-items:center;
  padding:0;
}
.btn.stop{background:var(--danger); color:#fff}
.btn.send:disabled{opacity:.3}
.hint{max-width:760px; margin:7px auto 0; text-align:center}
.attach-bar{max-width:760px; margin:0 auto 9px; display:flex; gap:9px; flex-wrap:wrap}
.chip{position:relative}
.chip img{height:62px; border-radius:9px; display:block; border:1px solid var(--line)}
.chip button{
  position:absolute; top:-6px; right:-6px; width:21px; height:21px; border-radius:50%;
  background:var(--danger); color:#fff; border:0; cursor:pointer;
  font-size:13px; line-height:1; display:grid; place-items:center;
}
.status{
  max-width:760px; margin:0 auto 9px; color:var(--muted); font-size:13px;
  display:flex; align-items:center; gap:8px;
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:blink 1.1s infinite}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* 확인 창 */
.ask{position:fixed; inset:0; background:rgba(0,0,0,.55); display:grid; place-items:center; padding:24px; z-index:50}
.ask-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:24px; max-width:380px; width:100%}
/* 질문을 고칠 때는 넓게. 380px 에서 긴 질문을 고치는 건 고문이다. */
.ask-card:has(#ask-area-wrap:not([hidden])){max-width:580px}
.ask-card p{margin:0 0 16px; white-space:pre-wrap}
.ask-card input,.ask-card textarea{
  width:100%; padding:9px 12px; border-radius:9px; border:1px solid var(--line);
  background:var(--panel-2); color:var(--fg); font:inherit; margin-bottom:16px;
}
.ask-card textarea{resize:vertical; min-height:96px; max-height:40vh; line-height:1.6}
.ask-btns{display:flex; gap:9px; justify-content:flex-end}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9}

/* 모바일 */
@media (max-width:780px){
  #menu{display:block}
  .desktop-only{display:none}
  .side{
    position:fixed; left:0; top:0; bottom:0; z-index:10;
    transform:translateX(-100%); transition:transform .22s;
  }
  .side.open{transform:none}
  .thread{padding:18px 14px 8px}
  .composer{padding-left:12px; padding-right:12px}
  .bubble{max-width:88%}
}