:root {
  --bg: #faf9f7; --panel: #ffffff; --line: #e5e2dd;
  --text: #23211e; --dim: #6b6660; --me: #23211e; --me-text: #ffffff;
}
* { box-sizing: border-box; }
/* 숨김 표시가 아래 display 규칙에 눌리지 않게 — 이게 없으면 로그인 화면이 안 사라진다 */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.6 system-ui, "Malgun Gothic", sans-serif;
}

/* 로그인 */
#gate { height: 100%; display: grid; place-items: center; padding: 20px; }
#gate-form { width: 280px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
#gate-form h1 { font-size: 20px; margin: 0 0 6px; }
#gate-pw, #input { border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; background: #fff; }
#gate-form button, #send { border: 0; border-radius: 8px; padding: 10px; background: var(--me); color: var(--me-text); font: inherit; cursor: pointer; }
#gate-msg { color: #b4453a; font-size: 13px; min-height: 18px; margin: 0; }

/* 본 화면 — 가로 2단 */
#main { height: 100%; display: grid; grid-template-columns: minmax(320px, 1fr) 1.2fr; }
#left { display: flex; flex-direction: column; border-right: 1px solid var(--line); min-width: 0; }
#chat { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 80%; padding: 10px 13px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
.bubble.me { align-self: flex-end; background: var(--me); color: var(--me-text); }
/* 두뇌 답은 표가 들어올 수 있어 조금 더 넓게 쓴다. 꾸밈을 붙인 뒤에는 줄바꿈을 태그가 맡는다 */
.bubble.ai { align-self: flex-start; max-width: 94%; background: var(--panel); border: 1px solid var(--line); }
.bubble.ai:has(p), .bubble.ai:has(ul), .bubble.ai:has(.tablewrap) { white-space: normal; }
.bubble.waiting { color: var(--dim); }
/* 두뇌 답 안의 꾸밈 — 말풍선 안이라 여백을 바짝 좁힌다 */
.bubble.ai p, #panel p { margin: 0 0 8px; }
.bubble.ai p:last-child, .bubble.ai ul:last-child, .bubble.ai ol:last-child, #panel > :last-child { margin-bottom: 0; }
.bubble.ai h4, #panel h4 { font-size: 15px; margin: 14px 0 6px; }
.bubble.ai h4:first-child, #panel h4:first-child { margin-top: 0; }
.bubble.ai ul, .bubble.ai ol, #panel ul, #panel ol { margin: 0 0 8px; padding-left: 20px; }
.bubble.ai li, #panel li { margin: 2px 0; }
.bubble.ai code, #panel code { background: #f0eeea; border-radius: 4px; padding: 1px 4px; font-size: 13px; }
.bubble.ai hr, #panel hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
/* 표는 말풍선보다 넓을 수 있다 — 화면을 밀지 않고 표 안에서만 옆으로 넘긴다 */
.bubble.ai .tablewrap, #panel .tablewrap { overflow-x: auto; margin: 0 0 8px; }
/* 칸이 한 글자씩 끊기지 않도록 최소 너비를 준다. 넘치면 표 안에서 옆으로 넘긴다 */
.bubble.ai table, #panel table { border-collapse: collapse; font-size: 13px; width: max-content; min-width: 100%; }
.bubble.ai th, .bubble.ai td, #panel th, #panel td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; min-width: 86px; max-width: 240px; }
.bubble.ai th, #panel th { background: #f4f2ef; font-weight: 600; white-space: nowrap; }
#send:disabled { opacity: .4; cursor: default; }
#composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
#input { flex: 1; resize: none; max-height: 160px; }

/* 오른쪽 판 */
#right { display: flex; flex-direction: column; min-width: 0; }
#panel-head { padding: 12px 20px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 13px; }
#panel { flex: 1; overflow: auto; padding: 20px; }
#panel .empty { color: var(--dim); }

/* 좁은 화면이면 위아래 */
@media (max-width: 760px) {
  #main { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  #left { border-right: 0; border-bottom: 1px solid var(--line); }
}