I have created css (with help of AI) to improve the native chat interface. Let me know how it looks. Put this in chat node custom css option.
:root {
--chat--color-primary: #10a37f;
--chat--color-secondary: #ececf1;
--chat--color-white: #ffffff;
--chat--color-light: #f0f2f5; /* updated to be lighter */
--chat--color-dark: #343541;
--chat--color-muted: #8e8ea0;
--chat--border-radius: 0.75rem;
--chat--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--chat--message--font-size: 13px; /* reduced from 0.9375rem */
--chat--message-line-height: 1.4;
--chat--spacing: 1rem;
--chat--window--width: 420px;
--chat--window--height: 600px;
--chat--window--border: 1px solid #e0e0e0;
--chat--window--border-radius: var(--chat--border-radius);
--chat--window--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
--chat--header--background: #ffffff;
--chat--header--color: #202123;
--chat--heading--font-size: 1.25rem;
--chat--message--user--background: #d1f4e3; /* softer user color */
--chat--message--user--color: #202123;
--chat--message--bot--background: #ffffff; /* bot background now brighter than container */
--chat--message--bot--color: #202123;
--chat--input--background: #ffffff;
--chat--input--text-color: #000;
--chat--input--padding: 1rem;
--chat--textarea--height: auto;
--chat--input--border: 1px solid #dcdcdc;
--chat--input--border-radius: var(--chat--border-radius);
--chat--button--background: transparent;
--chat--button--color: var(--chat--color-primary);
--chat--button--hover--background: #e6f5f0;
}
.chat-window {
width: var(--chat--window--width);
height: var(--chat--window--height);
background: var(--chat--color-white);
border-radius: var(--chat--window--border-radius);
box-shadow: var(--chat--window--box-shadow);
display: flex;
flex-direction: column;
overflow: hidden;
font-family: var(--chat--font-family);
}
.chat-header {
background: var(--chat--header--background);
padding: var(--chat--spacing);
font-size: var(--chat--heading--font-size);
font-weight: 600;
color: var(--chat--header--color);
border-bottom: 1px solid #e5e5e5;
}
.chat-messages {
flex: 1 1 auto;
overflow-y: auto;
background: var(--chat--color-light); /* lighter than message bubbles */
padding: var(--chat--spacing);
}
.chat-message {
max-width: 80%;
padding: var(--chat--spacing);
margin-bottom: 1rem;
border-radius: var(--chat--border-radius);
line-height: var(--chat--message-line-height);
font-size: var(--chat--message--font-size);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* subtle shadow for separation */
}
.chat-message p {
margin-top: 0.25em; /* reduced spacing */
margin-bottom: 0.25em;
}
.chat-message.user {
background: var(--chat--message--user--background);
color: var(--chat--message--user--color);
margin-left: auto;
}
.chat-message.bot {
background: var(--chat--message--bot--background);
color: var(--chat--message--bot--color);
margin-right: auto;
}
.chat-footer {
display: flex;
align-items: center;
padding: var(--chat--spacing);
background: var(--chat--color-white);
border-top: 1px solid #e0e0e0;
}
.chat-input {
flex: 1;
padding: var(--chat--input--padding);
background: var(--chat--input--background);
color: var(--chat--input--text-color);
border: var(--chat--input--border);
border-radius: var(--chat--input--border-radius);
font-size: 1rem;
resize: vertical;
outline: none;
max-height: 200px;
overflow-y: auto;
line-height: 1.4;
}
.chat-send-button {
margin-left: 0.5rem;
background: var(--chat--button--background);
color: var(--chat--button--color);
border: none;
cursor: pointer;
padding: 0.6rem 1rem;
border-radius: var(--chat--border-radius);
transition: background 0.2s ease;
}
.chat-send-button:hover {
background: var(--chat--button--hover--background);
}