:root {
  --clay: #0e8a99;        /* DCConnect teal (accent) */
  --clay-ink: #0a6b78;    /* darker teal */
  --bg: #ffffff;
  --panel: #f5f8f9;
  --ink: #11201f;
  --muted: #5f6f70;
  --line: #e2e8e9;
  --user: #eaf1fb;
  --assistant: #eef5f6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1717; --panel: #182122; --ink: #eef4f4; --muted: #9bb0b0;
    --line: #2a3536; --user: #1f2c3a; --assistant: #1a2627;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink); background: var(--bg);
}
#app { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 600; display: flex; align-items: center; gap: 7px; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.link-btn {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font: inherit; font-size: 12px; padding: 2px 4px;
}
.link-btn:hover { color: var(--clay); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); }
.status { font-size: 11px; color: var(--muted); }
.status.ok { color: #2e8b57; }
.status.bad { color: #c0392b; }

.context {
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.3;
}
.muted { color: var(--muted); }

.quick { display: flex; gap: 6px; padding: 8px 12px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 999px; padding: 5px 11px; font-size: 12px; cursor: pointer;
}
.chip:hover { border-color: var(--clay); }

.log { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { display: flex; }
.msg.user { justify-content: flex-end; }
.bubble {
  max-width: 88%; padding: 8px 11px; border-radius: 12px; white-space: pre-wrap;
  word-wrap: break-word;
}
.msg.user .bubble { background: var(--user); border-top-right-radius: 4px; }
.msg.assistant .bubble { background: var(--assistant); border-top-left-radius: 4px; }
.actions { display: flex; gap: 6px; margin-top: 6px; }
.actions button {
  border: 1px solid var(--line); background: transparent; color: var(--clay-ink);
  border-radius: 6px; padding: 3px 9px; font-size: 12px; cursor: pointer;
}
.actions button:hover { background: var(--panel); }

.composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 8px;
  padding: 8px; font: inherit; color: var(--ink); background: var(--bg);
}
.send {
  border: none; background: var(--clay); color: #fff; border-radius: 8px;
  padding: 0 14px; font-weight: 600; cursor: pointer;
}
.send:hover { background: var(--clay-ink); }
.send:disabled { opacity: .6; cursor: default; }