:root{
  --header-h: 110px;
  --bubble: #eef4fa;
  --text: #111;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#fff;color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial}

.topbar{
  height:var(--header-h);padding:20px 30px;
  background:linear-gradient(90deg,#5b3dd8,#2fc0ff);color:#fff;
  display:flex;align-items:center
}
.brand{display:flex;align-items:center;gap:14px}
.brand-logo{width:64px;height:64px;border-radius:50%;background:#0001}
.brand-title{font-weight:700;font-size:22px}
.brand-sub{font-size:12px;opacity:.9}

.page-wrap{min-height:calc(100vh - var(--header-h));padding:20px}
.chat-area{max-width:980px;margin:0 auto}

.chat-widget{position:relative;background:#fff;border:1px solid #eef2f7;border-radius:12px;padding:16px 16px 76px;box-shadow:0 8px 30px #0000000d}
.system-note{color:#666;text-align:center;font-size:12px;margin:10px 0}
.msg-row{display:flex;gap:12px;align-items:flex-start;margin:14px 0}
.avatar{width:44px;height:44px;border-radius:50%;background:#0001;overflow:hidden}
.bubble{background:var(--bubble);padding:14px 16px;border-radius:16px;max-width:640px}
.input-row{position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:8px}
.input-row input{flex:1;border:1px solid #e6ecf3;border-radius:12px;padding:12px 14px}
.btn{border:0;border-radius:12px;padding:10px 16px;background:#111;color:#fff;cursor:pointer}