:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --user: #2563eb;
  --user-fg: #ffffff;
  --bot: #eef0f4;
  --bot-fg: #1f2330;
  --muted: #8a90a0;
  --border: #e3e6ec;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--bot-fg);
}

#app { display: flex; flex-direction: column; height: 100vh; }

#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
#topbar .title { font-weight: 600; }
.badge {
  margin-left: auto; font-size: 12px; color: var(--muted);
  background: var(--bg); padding: 3px 8px; border-radius: 10px;
}

#history {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}

.msg { max-width: 80%; padding: 9px 12px; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: var(--user); color: var(--user-fg); border-bottom-right-radius: 4px; }
.msg.bot  { align-self: flex-start; background: var(--bot); color: var(--bot-fg); border-bottom-left-radius: 4px; }
.msg.system { align-self: center; background: transparent; color: var(--muted); font-size: 13px; }

.report-btn {
  align-self: flex-start; margin: -4px 0 4px 2px;
  background: none; border: none; color: var(--muted);
  font-size: 12px; cursor: pointer; padding: 0;
}
.report-btn:hover { color: #c0392b; text-decoration: underline; }

#composer {
  display: flex; gap: 8px; padding: 10px 12px;
  background: var(--panel); border-top: 1px solid var(--border);
}
#input {
  flex: 1; resize: none; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  font: inherit; max-height: 140px;
}
#send {
  width: 42px; border: none; border-radius: 10px;
  background: var(--user); color: #fff; font-size: 16px; cursor: pointer;
}
#send:disabled { opacity: .5; cursor: default; }

#attach {
  width: 42px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel); font-size: 16px; cursor: pointer;
}
#attach:disabled { opacity: .5; cursor: default; }