:root{
  --bg:#f6f7fb; --accent:#1f6feb; --muted:#666; --bubble:#ffffff;
}
 body{font-family:Inter,system-ui,Arial,Helvetica,sans-serif;background:var(--bg);margin:0;height:100vh}
.page{padding:24px}

#chat-widget {position:fixed;right:20px;bottom:20px;z-index:9999}
 .chat-toggle{background:#092437;color:#fff;padding:10px 14px;border-radius:20px;cursor:pointer;box-shadow:0 6px 18px rgba(9,36,55,0.3)}
 .chat-panel{width:320px;height:420px;background:#fff;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.12);overflow:hidden;margin-top:8px;display:flex;flex-direction:column}
 .chat-header{background:#092437;color:#fff;padding:12px 14px;font-weight:600}
.messages{flex:1;padding:12px;overflow:auto;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg, #fbfdff, #fff)}
.msg{max-width:86%;padding:10px 12px;border-radius:12px;box-shadow:0 1px 0 rgba(0,0,0,0.02);}
.msg.user{align-self:flex-end;background:#e6f0ff;color:#012}
.msg.agent{align-self:flex-start;background:var(--bubble);color:#102030;border:1px solid #f0f0f4}
.controls{padding:10px;border-top:1px solid #eef2f8;background:#fff}
.btn{display:inline-block;padding:8px 12px;margin:4px;border-radius:8px;background:#f3f6ff;color:#042;cursor:pointer;border:1px solid #e6edff}
 .btn.primary{background:var(--accent);color:#fff;border:0}
.input{width:100%;padding:8px;border-radius:8px;border:1px solid #e6e9ef}
 .chat-closed .chat-panel{display:none}

/* small responsive */
@media (max-width:420px){.chat-panel{width:92vw;height:60vh}}