/* ─────────────────────────────────────────────────────────────
   최소 스타일만 둡니다. 디자인은 이 파일만 갈아끼우면 됩니다.
   (HTML 구조와 클래스는 그대로 두고, 여기 CSS만 교체)

   바이브코딩 팁: ChatGPT 등에 아래처럼 요청해 이 파일을 통째로 교체하세요.
   "다음 HTML 구조에 어울리는 모던하고 깔끔한 채팅 UI CSS를 만들어줘.
    좌측 .chat(.log 안의 .msg.user/.msg.bot, 하단 .ask 입력창),
    우측 .trace 패널(.step, .step.tool, .step .k 라벨, .step .v 내용).
    다크모드 토글까지 있으면 좋겠어."
   ───────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; }

.app { display: flex; height: 100vh; }

.chat { flex: 2; display: flex; flex-direction: column; padding: 16px; border-right: 1px solid #ddd; }
.chat h1 { font-size: 18px; margin: 0 0 12px; }
.log { flex: 1; overflow: auto; }
.msg { margin: 6px 0; padding: 8px 12px; border-radius: 8px; max-width: 80%; white-space: pre-wrap; }
.msg.user { background: #e8f0fe; margin-left: auto; }
.msg.bot { background: #f1f1f1; }
.ask { display: flex; gap: 8px; margin-top: 8px; }
.ask input { flex: 1; padding: 8px; }
.ask button { padding: 8px 14px; }

.trace { flex: 1; padding: 16px; background: #fafafa; overflow: auto; }
.trace h2 { font-size: 15px; margin: 0 0 10px; }
.step { margin: 8px 0; padding: 8px 10px; border-left: 3px solid #bbb; background: #fff; }
.step.tool { border-left-color: #6c5ce7; }
.step .k { font-weight: 700; font-size: 12px; color: #555; }
.step .v { white-space: pre-wrap; font-size: 13px; color: #444; margin-top: 4px; }
.hint { color: #999; font-size: 13px; }
