/* 웹상담 테스트 장치 스타일.
   채팅 영역(#app 이하)은 project/webhook-dev-server/wwwroot/css/console.css 를 차용했다 —
   말풍선 3역할(customer/agent/system)·목록·composer 규약을 그대로 유지한다. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Segoe UI', Pretendard, -apple-system, sans-serif; color: #21262e; background: #eef1f6; display: flex; flex-direction: column; }

/* ── 상단바 ── */
.topbar { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: #1c2b53; color: #fff; flex: 0 0 auto; }
.topbar .brand { font-weight: 700; }
.topbar nav { display: flex; gap: .2rem; }
.topbar nav a { color: #c8d3ea; text-decoration: none; padding: .3rem .7rem; border-radius: 8px; font-size: .88rem; }
.topbar nav a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.topbar nav a.on { background: #2f6df6; color: #fff; font-weight: 600; }
.topbar .grow { flex: 1; }
.topbar .sitesel { font-size: .82rem; color: #c8d3ea; }
.topbar select { font: inherit; font-size: .82rem; padding: .2rem .4rem; border-radius: 6px; border: 0; }
.topbar a.dim { color: #8fa0c4; text-decoration: none; font-size: .8rem; }

.stage { flex: 1; min-height: 0; overflow: auto; padding: 1rem; }
body.full .stage { padding: 0; overflow: hidden; }

/* ── 카드/표/폼 ── */
.card { background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(20, 40, 80, .08); padding: 1.2rem 1.4rem; margin: 0 auto 1rem; max-width: 1180px; line-height: 1.65; }
.card h1 { font-size: 21px; margin: 0 0 .4rem; }
.card h2 { font-size: 16px; margin: 0 0 .6rem; }
.badge { background: #ffe9a8; color: #7a5a00; border-radius: 6px; font-size: 11px; padding: 2px 6px; vertical-align: middle; }
.dim { color: #8a94a6; font-size: .84rem; }
.warn { background: #fff8e6; border: 1px solid #f0dca8; border-radius: 8px; padding: .5rem .7rem; font-size: .86rem; }
code { background: #f2f4f8; padding: 1px 5px; border-radius: 4px; font-size: .86em; }
a { color: #2453d8; }
.row { display: flex; align-items: center; gap: .5rem; }
.row .grow { flex: 1; }

.btn { border: 1px solid #ccd2dc; background: #fff; border-radius: 8px; padding: .35rem .8rem; cursor: pointer; font: inherit; font-size: .84rem; }
.btn:hover { border-color: #2f6df6; color: #2f6df6; }
.btn.primary { background: #2f6df6; color: #fff; border-color: #2f6df6; font-weight: 600; }
.btn.danger:hover { border-color: #c0392b; color: #c0392b; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem; }
.grid label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; color: #5b6678; }
.grid input, .grid select { font: inherit; padding: .45rem .6rem; border: 1px solid #ccd2dc; border-radius: 8px; }

.tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tbl th { text-align: left; padding: .4rem .5rem; border-bottom: 2px solid #e6e6e6; color: #5b6678; font-weight: 600; white-space: nowrap; }
.tbl td { padding: .4rem .5rem; border-bottom: 1px solid #f0f2f6; vertical-align: top; }
.tbl td.mono { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; word-break: break-all; }
.pill { border-radius: 999px; padding: .05rem .5rem; font-size: .72rem; font-weight: 600; }
.pill.ok { background: #e3f6e8; color: #1c7a37; }
.pill.bad { background: #fdeaea; color: #c0392b; }
.pill.gray { background: #eceff4; color: #6b7688; }

/* ── 상담 화면 (webhook-dev-server 차용) ── */
#app { height: 100%; display: flex; min-height: 0; width: 100%; background: #fff; }

#list { width: 300px; flex: 0 0 auto; border-right: 1px solid #e6e6e6; overflow-y: auto; background: #fafbfc; }
#list .filters { display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem .6rem; border-bottom: 1px solid #eee; }
#list .tag { border: 1px solid #ccd2dc; background: #fff; border-radius: 999px; padding: .28rem .8rem; cursor: pointer; font-size: .8rem; color: #5b6678; transition: all .12s; }
#list .tag:hover { border-color: #2f6df6; color: #2f6df6; }
#list .tag.active { background: #2f6df6; color: #fff; border-color: #2f6df6; font-weight: 600; }
#list .tag.active::before { content: '✓ '; }
#list .hint { padding: .5rem 1rem; color: #888; font-size: .78rem; border-bottom: 1px solid #eee; }
#list ul { list-style: none; margin: 0; padding: 0; }
.empty-state { padding: 2rem 1rem; text-align: center; color: #aaa; font-size: .82rem; }
.conv { padding: .6rem 1rem; border-bottom: 1px solid #eee; cursor: pointer; }
.conv:hover { background: #f0f3f7; }
.conv.active { background: #e7f0ff; border-left: 3px solid #2f6df6; padding-left: calc(1rem - 3px); }
.conv.ended { opacity: .6; }
.conv .who { font-weight: 600; font-size: .9rem; }
.conv .seq { color: #8a94a6; font-size: .76rem; font-weight: 500; }
.conv .prev { color: #666; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .t { color: #aaa; font-size: .72rem; }
.conv .badge { background: #bbb; color: #fff; border-radius: 8px; font-size: .66rem; padding: 0 .35rem; vertical-align: middle; }

#chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#chatbar { display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-bottom: 1px solid #e6e6e6; }
#chatHead { font-weight: 600; font-size: .9rem; flex: 1; }
#chatHead.empty { color: #aaa; font-weight: 400; }
.end-btn { border: 1px solid #e0b3b3; background: #fff; border-radius: 8px; padding: .35rem .8rem; cursor: pointer; font-size: .82rem; color: #c0392b; white-space: nowrap; font-weight: 600; }
.end-btn:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
#thread { flex: 1; overflow-y: auto; padding: 1rem; background: #f5f6f8; }
.ended-notice { padding: .8rem 1rem; text-align: center; color: #999; font-size: .85rem; border-top: 1px solid #e6e6e6; background: #fafafa; }

.line { margin: .4rem 0; display: flex; flex-direction: column; }
.line .bubble { max-width: 70%; padding: .5rem .7rem; border-radius: 12px; white-space: pre-wrap; word-break: break-word; }
.line .bt { font-size: .68rem; color: #aaa; margin: .1rem .2rem; }
.line.customer { align-items: flex-start; }
.line.customer .bubble { background: #fff; border: 1px solid #e3e3e3; border-top-left-radius: 3px; }
.line.agent { align-items: flex-end; }
.line.agent .bubble { background: #2f6df6; color: #fff; border-top-right-radius: 3px; }
.line.agent .bt { align-self: flex-end; }
.line.system { align-items: center; }
.line.system .bubble { background: #e6e6e6; color: #555; font-size: .78rem; max-width: none; }

#composer { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid #e6e6e6; background: #fff; }
#msg { flex: 1; padding: .6rem .8rem; border: 1px solid #ccc; border-radius: 8px; font: inherit; }
#composer button { padding: .6rem 1.1rem; border: 0; border-radius: 8px; background: #2f6df6; color: #fff; font-weight: 600; cursor: pointer; }
#composer button:disabled { opacity: .5; cursor: default; }