:root { color-scheme: light; font-family: Pretendard, "Noto Sans KR", Arial, sans-serif; color: #1f2d35; background: #dceef6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background-color: #dceef6; background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2397c7d8' stroke-width='1.2' opacity='.28'%3E%3Cpath d='M12 21h15l-4 5 4 5H12l4-5zM86 18c5-5 13-5 18 0s5 13 0 18-13 5-18 0-5-13 0-18zM46 87c6-6 14-6 20 0M78 87l7 7-7 7-7-7zM21 67c0-5 4-9 9-9s9 4 9 9-4 9-9 9-9-4-9-9z'/%3E%3C/g%3E%3C/svg%3E"); }
.shell { width: min(100%, 800px); min-height: 100vh; margin: auto; padding: 22px 28px 32px; display: flex; flex-direction: column; background: rgba(237, 247, 252, .87); border-inline: 1px solid rgba(111, 167, 190, .28); box-shadow: 0 0 42px rgba(63, 112, 135, .12); }
.chat-header { display: flex; align-items: center; justify-content: space-between; min-height: 58px; margin: -22px -28px 24px; padding: 12px 22px; background: rgba(255, 255, 255, .92); border-bottom: 1px solid #c8e0ea; box-shadow: 0 2px 10px rgba(59, 114, 137, .08); }
.header-leading { display: flex; align-items: center; min-width: 0; gap: 11px; }
.back-arrow { color: #4c9ab9; font-size: 2rem; font-weight: 300; line-height: 1; transform: translateY(-2px); }
.header-agent { width: 42px; height: 42px; }
.chat-title { min-width: 0; }
h1 { margin: 0; color: #2c6178; font-size: 1rem; letter-spacing: -.03em; }
.subtitle { display: flex; align-items: center; gap: 5px; margin: 4px 0 0; color: #71848d; font-size: .78rem; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #62bd89; box-shadow: 0 0 0 2px #e6f6ed; }
.header-actions { display: flex; gap: 19px; color: #4f9dbc; font-size: 1.45rem; line-height: 1; }
.notice { display: flex; gap: 9px; align-items: flex-start; padding: 14px 16px; border: 1px solid #c9e0eb; border-radius: 14px; background: rgba(255, 255, 255, .88); color: #476775; font-size: .9rem; line-height: 1.5; }
.messages { flex: 1; min-height: 290px; max-height: 51vh; overflow: auto; padding: 26px 0 18px; }
.message { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; line-height: 1.6; white-space: pre-wrap; }
.message > div { max-width: 78%; padding: 13px 16px; border-radius: 4px 16px 16px 16px; background: #fff; box-shadow: 0 4px 14px rgba(60, 109, 133, .12); }
.message.user { flex-direction: row-reverse; }
.message.user > div { border-radius: 16px 4px 16px 16px; background: #d9f5c8; color: #213d2a; }
.avatar { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #d4edf8; color: #32718b; font-size: .72rem; font-weight: 800; }
.agent-icon { background: #fff2d9; color: #287157; box-shadow: inset 0 0 0 1px #d1e3d7; }
.agent-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.agent-icon .bot { fill: #ffffff; }
.agent-icon .eye { fill: currentColor; stroke: none; }
.agent-icon .cheek { fill: #ffbcaa; stroke: none; }
.agent-icon .check { stroke: #e48a62; stroke-width: 1.5; }
.user .avatar { background: #b9e6a6; }
.pending > div { color: #65736d; font-style: italic; }
.suggestions { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px 0 14px; }
.suggestions button { border: 1px solid #bddbe7; border-radius: 99px; background: rgba(255, 255, 255, .58); padding: 9px 12px; color: #39758e; font: inherit; font-size: .84rem; cursor: pointer; }
.suggestions button:hover { background: #fff; }
.composer { display: flex; align-items: end; gap: 10px; padding: 8px 8px 8px 16px; border: 1px solid #b8d8e4; border-radius: 17px; background: #fff; box-shadow: 0 9px 24px rgba(54, 112, 140, .16); }
textarea { width: 100%; min-height: 38px; max-height: 140px; border: 0; resize: none; padding: 9px 0; color: inherit; font: inherit; outline: 0; }
.composer button { border: 0; border-radius: 11px; padding: 11px 15px; background: #4f9dbc; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.composer button:disabled { opacity: .55; cursor: wait; }
.footnote { margin: 15px 0 0; text-align: center; color: #7c8782; font-size: .76rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
@media (max-width: 560px) { .shell { padding: 18px 16px 24px; } .chat-header { margin: -18px -16px 22px; padding: 11px 16px; } .messages { min-height: 330px; } .message > div { max-width: 84%; } .suggestions button { font-size: .78rem; } }