.chat-page{min-height:calc(100vh - 88px);padding:45px 0 70px;background:linear-gradient(#fbfaf6,#f3f7f0)}.chat-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:42px;align-items:start}.intro{position:sticky;top:30px}.intro h1{font-size:clamp(2.45rem,4.2vw,4rem);line-height:1.04;letter-spacing:-.04em;margin:10px 0 18px}.intro>p{color:#4f5f59}.note{margin-top:28px;padding:18px;border:1px solid var(--border);border-radius:17px;background:#fff;color:#56655f}
.chatbox{min-height:650px;background:#fff;border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:0 18px 45px rgba(18,51,45,.1);display:flex;flex-direction:column}.chathead{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid var(--border)}.chathead strong,.chathead small{display:block}.chathead small{font-size:.75rem;color:#8a9691}.chathead small.online{color:var(--green)}.chathead small.error{color:#b13b30}.chathead button{border:1px solid var(--border);background:#fff;padding:8px 11px;border-radius:9px;cursor:pointer}
.messages{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1;min-height:490px;max-height:63vh;overflow-y:auto}.msg{max-width:84%;padding:12px 15px;border-radius:16px;white-space:pre-wrap}.msg.ai{align-self:flex-start;background:#f4f7f2;border:1px solid #e1e8df;border-bottom-left-radius:5px}.msg.user{align-self:flex-end;background:var(--green);color:#fff;border-bottom-right-radius:5px}.msg.system{align-self:center;background:#fff7e9;border:1px solid #f0dfb7;color:#6b582f;max-width:94%;font-size:.9rem}.typing{opacity:.65;font-style:italic}
.composer{display:flex;gap:9px;padding:15px;border-top:1px solid var(--border);background:#fbfcfa}.composer input{flex:1;border:1px solid #d8e0da;border-radius:12px;padding:13px;font-size:1rem;outline:none}.composer input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(47,125,59,.10)}.composer button{border:0;background:var(--green);color:#fff;border-radius:12px;padding:0 18px;font-weight:700;cursor:pointer}.composer button:disabled,.composer input:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:850px){.chat-layout{grid-template-columns:1fr}.intro{position:static}.chatbox{min-height:620px}.messages{max-height:none}}
@media(max-width:520px){.msg{max-width:92%}.composer button{padding:0 12px}}