:root{
  --card-w: 980px;
  --accent: #0d6efd;
  --bg: #f4f7fb;
  --user-bg: var(--accent);
  --bot-bg: #f1f3f5;
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

.chat-card{
  width: min(92vw, var(--card-w));
  height: min(92vh, 740px);
  background: #fff;
  display: flex;
  flex-direction: column;
}

.chat-top { background: linear-gradient(90deg,#0b5ed7 0%, #0d6efd 100%); color: #fff; }

.brand-avatar{
  background: rgba(255,255,255,0.12);
  width:48px;height:48px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:20px;
}

/* body layout */
.chat-body { display:flex; flex:1; min-height:0; }

/* side */
.chat-side { width: 220px; background:#fbfdff; }

/* messages */
.messages { background: linear-gradient(180deg,#ffffff 0%, #fbfdff 100%); }

.msg {
  margin-bottom: 14px;
  display:flex;
  gap: 10px;
  align-items:flex-end;
}

.msg .bubble{
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 78%;
  line-height:1.45;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* user */
.msg.user { justify-content: flex-end; }
.msg.user .bubble {
  background: var(--user-bg);
  color: #fff;
  border-bottom-right-radius: 6px;
}

/* bot */
.msg.bot { justify-content: flex-start; }
.msg.bot .bubble {
  background: var(--bot-bg);
  color: #111;
  border-bottom-left-radius: 6px;
}

.msg .meta {
  font-size: 11px;
  color: #888;
  margin-top:4px;
}

/* typing */
.typing {
  display:flex;
  gap:6px;
  align-items:center;
}
.typing .dot {
  width:7px;height:7px;border-radius:50%;
  background:#ccc; animation: blink 1s infinite;
}
.typing .dot:nth-child(2){ animation-delay:0.12s }
.typing .dot:nth-child(3){ animation-delay:0.24s }
@keyframes blink {
  0% { opacity:0.2; transform: translateY(0); }
  50% { opacity:1; transform: translateY(-3px); }
  100% { opacity:0.2; transform: translateY(0); }
}

/* responsive */
@media (max-width: 768px){
  .chat-side { display:none; }
  .chat-card { height: 100vh; border-radius:0; }
}