rojects/source/components/rojo-chat-panel/rojo-chat-panel.css

rojo-chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #0f1117;
}

/* ── Toolbar ─────────────────────────────────────────────── */

.rcp-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #13151f;
  border-bottom: 1px solid #2a2d3a;
  flex-shrink: 0;
}

.rcp-picker {
  flex: 1;
  background: #1a1d2a;
  color: #dde0f0;
  border: 1px solid #2a2d3a;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  min-width: 0;
}

.rcp-picker:focus { border-color: #3a4a8a; }

.rcp-toolbar-icon {
  width: 32px;
  height: 32px;
  background: #1a5fd4;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.rcp-toolbar-name {
  flex: 1;
  color: #e2e4ed;
  font-size: 0.95rem;
}

.rcp-toolbar-btn {
  width: 32px;
  height: 32px;
  background: #1a5fd4;
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rcp-toolbar-btn:hover { background: #1450b0; }

/* ── Chat history ────────────────────────────────────────── */

.rcp-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #08090e;
}

.rcp-user-bubble {
  align-self: flex-end;
  background: #1e2235;
  color: #dde0f0;
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 80%;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9rem;
  line-height: 1.5;
}

.rcp-assistant-bubble {
  align-self: flex-start;
  background: #13151f;
  color: #c8ccde;
  padding: 10px 14px;
  border-radius: 10px;
  max-width: 85%;
  font-size: 0.9rem;
  line-height: 1.6;
  word-break: break-word;
}

.rcp-assistant-bubble p { margin: 0 0 0.5em; }
.rcp-assistant-bubble p:last-child { margin-bottom: 0; }
.rcp-assistant-bubble ul,
.rcp-assistant-bubble ol { padding-left: 1.4em; margin: 0 0 0.5em; }
.rcp-assistant-bubble li { margin: 0.15em 0; }
.rcp-assistant-bubble strong { color: #e2e4ed; }
.rcp-assistant-bubble code {
  background: #1a1d27;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.85em;
  font-family: ui-monospace, "Cascadia Code", monospace;
}
.rcp-assistant-bubble pre {
  background: #1a1d27;
  padding: 10px 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.5em 0;
}
.rcp-assistant-bubble pre code { background: none; padding: 0; }

/* ── Input area ──────────────────────────────────────────── */

.rcp-input-area {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px;
  background: #3a1010;
  border-top: 1px solid #2a2d3a;
  flex-shrink: 0;
}

.rcp-input-text {
  flex: 1;
  min-height: 4.5em;
  max-height: 4.5em;
  overflow-y: auto;
  background: #1a1520;
  color: #dde0f0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  word-break: break-word;
}

.rcp-input-text:empty::before {
  content: 'Type message…';
  color: #555;
  pointer-events: none;
}

.rcp-input-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rcp-input-btn {
  width: 36px;
  height: 36px;
  background: #555;
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rcp-input-btn:hover:not(:disabled) { background: #6a6a6a; }
.rcp-input-btn:disabled { opacity: 0.35; cursor: default; }