Create Theme CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); .background { background: #e1e8ed; font-family: 'Roboto', Arial, sans-serif; min-height: 100vh; } .message { border-radius: 18px; line-height: 1.5rem; box-shadow: 0 1px 0 rgba(207, 217, 222, 0.7), 0 0.5px 0 rgba(0,0,0,0.04); padding: 0.85em 1.2em; margin-bottom: 0.75em; font-size: 1.05rem; border: 1px solid #d9eaf7; max-width: 420px; position: relative; } .message.is-user { background-color: #ffffff; color: #14171a; border: 1px solid #cfd8dc; } .message.is-self { background-color: #1da1f2; color: #ffffff; border: 1.5px solid #1b95e0; box-shadow: 0 2px 10px rgba(0,150,255,0.08); } .message.is-bot { background-color: #f5f8fa; color: #14171a; border: 1px solid #e1e8ed; } .message-avatar { border-radius: 9999px; border: 3px solid #ffffff; box-shadow: 0 0 0 2px #1da1f2; width: 38px; height: 38px; object-fit: cover; } /* metadata, displayed over .background */ .bot-name { color: #1da1f2; font-weight: 700; letter-spacing: 0.01em; font-size: 1.04em; } .bot-description { color: #657786; font-size: 0.96em; font-style: italic; margin-left: 0.3em; } .message-meta { color: #657786; font-size: 0.93em; margin-top: 2px; opacity: 0.89; } .action-label { color: #657786; letter-spacing: 0.035em; font-size: 0.95em; } .message-input { border-radius: 0.375rem; background-color: #f5f8fa; border: 1.5px solid #aab8c2; padding: 0.75em 1em; color: #14171a; font-size: 1.05rem; font-family: 'Roboto', Arial, sans-serif; transition: border-color 0.2s; } .message-input:focus { outline: none; border-color: #1da1f2; background-color: #fff; } .message-button { display: flex; justify-content: center; align-items: center; border-radius: 25px; color: #ffffff; background-color: #1da1f2; font-weight: 700; font-size: 1.05em; border: none; min-width: 90px; min-height: 36px; cursor: pointer; box-shadow: 0 1.5px 7px rgba(29,161,242,0.06); margin: 0.25em 0.2em; transition: opacity 0.2s ease-in-out, background 0.18s, box-shadow 0.2s; } .message-button:hover { background-color: #1991da; box-shadow: 0 3px 16px rgba(29,161,242,0.16); } .message-button:active { background-color: #1583b6; } .message-button:disabled { pointer-events: none; opacity: 0.3; } .canvas-background { background-color: #f7f9fa; border-bottom: 1px solid #e1e8ed; } .canvas-text { color: #14171a; font-family: 'Roboto', Arial, sans-serif; font-size: 1.07rem; }