:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --muted: #666;
  --accent: #2b7cff;
}

* { box-sizing: border-box; font-family: Inter, system-ui, Arial, sans-serif; }

body {
  margin: 0;
  padding: 20px;
  background: var(--bg);
  color: #111;
}

#container {
  max-width: 720px;
  margin: 12px auto;
  display: grid;
  gap: 12px;
}

/* card */
.card {
  background: var(--card);
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* inputs & buttons */
input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin: 8px 0;
  border-radius: 8px;
  border: 1px solid #e3e6ea;
  font-size: 14px;
}

button {
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: white;
  cursor: pointer;
  font-size: 14px;
}

a { color: var(--accent); text-decoration: none; align-self:center; }

/* messages */
.messages {
  height: 360px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 8px;
  background: #fafbff;
  border: 1px solid #eef2ff;
  margin: 12px 0;
}

.chat-row { padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,0.03); }
.chat-row strong { margin-right: 8px; }

/* composer */
.composer { display:flex; gap:8px; align-items:center; }
.composer input { flex:1; }
.meta { display:flex; align-items:center; gap:12px; margin-bottom:6px; color:var(--muted) }

.muted { color:var(--muted); margin-top:8px; }