body {background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='164' height='164' style='opacity: 0.15; filter: grayscale(0.05);'%3e%3cdefs%3e%3clinearGradient id='b' x1='100%25' x2='25%25' y1='100%25' y2='25%25'%3e%3cstop offset='0%25' stop-color='%23FF2070'/%3e%3cstop offset='50%25' stop-color='%239670FF'/%3e%3cstop offset='100%25' stop-color='%23258DFF' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='c' x1='0%25' x2='75%25' y1='0%25' y2='75%25'%3e%3cstop offset='0%25' stop-color='%23258DFF'/%3e%3cstop offset='50%25' stop-color='%239670FF'/%3e%3cstop offset='100%25' stop-color='%23FF2070' stop-opacity='0'/%3e%3c/linearGradient%3e%3cpath id='a' fill='none' fill-rule='evenodd' stroke-linejoin='round' d='M41 .5c11.178 0 21.303 4.536 28.633 11.867C76.964 19.697 81.5 29.822 81.5 41s-4.536 21.303-11.867 28.633C62.303 76.964 52.178 81.5 41 81.5c-11.184 0-21.314-4.528-28.646-11.86C5.031 62.317.5 52.197.5 41c0-11.178 4.536-21.303 11.867-28.633C19.697 5.036 29.822.5 41 .5ZM30.628 10.897c-7.712 0-13.615 2.316-17.681 6.995-3.396 3.906-5.508 9.44-6.359 16.585 1.426-4.143 3.089-7.394 4.98-9.76 2.603-3.256 5.642-4.859 9.098-4.859 1.857 0 3.141.58 4.002 1.44 1.052 1.052 1.48 2.55 1.48 4.04 0 2.068-1.527 3.379-3.514 4.952-2.81 2.223-6.448 5.088-6.448 12.507 0 2.572.7 4.106 1.347 5.532.61 1.347 1.169 2.605 1.169 4.43 0 1.248-.605 2.502-1.62 3.421a5.443 5.443 0 0 1-3.66 1.407c-1.598 0-3.422-.682-5.191-2.496 1.758 4.658 5.443 8.964 10.246 12.229 5.475 3.722 12.408 6.094 19.648 6.094 7.125 0 13.102-2.01 17.364-5.21 4.462-3.348 7.04-8.001 7.04-12.98 0-4.66-1.687-8.478-4.387-11.177-2.892-2.892-6.938-4.498-11.288-4.498-4.077 0-7.316 1.11-9.57 2.95-2.374 1.938-3.64 4.685-3.64 7.744 0 2.25.686 3.991 1.604 5.281 1.009 1.418 2.3 2.307 3.216 2.704-1.299-3.083-1.11-5.497-.13-7.262.658-1.186 1.682-2.09 2.903-2.706 1.296-.654 2.814-.982 4.333-.982 1.997 0 3.274.898 4.095 2.132 1.206 1.816 1.377 4.418 1.386 5.862 0 .832-.527 4.904-3.333 7.71-1.568 1.57-3.84 2.754-7.129 2.754-6.08 0-10.244-1.92-13.025-4.702-3.67-3.67-4.933-8.87-4.933-13.256 0-3.992 1.74-8.001 4.67-10.933 2.719-2.718 6.457-4.51 10.772-4.51 6.504 0 11.005 2.325 15.212 4.599l.744.402c3.579 1.935 7.012 3.729 11.464 3.729 2.687 0 4.747-.579 6.292-1.576 1.728-1.116 2.8-2.753 3.397-4.64 1.233-3.893.486-8.835-.823-12.676.27 2.515.067 4.706-.515 6.452-.496 1.488-1.267 2.661-2.252 3.464-.991.807-2.2 1.247-3.583 1.247-6.809 0-10.378-4.46-14.326-9.507-4.744-6.063-10.084-12.932-23.055-12.932Z'/%3e%3c/defs%3e%3cuse x='82' y='82' stroke='url(%23b)' href='%23a'/%3e%3cuse stroke='url(%23c)' href='%23a'/%3e%3c/svg%3e"); background-position: -20px -20px; background-size: 140px 140px; background-repeat: repeat;}
.chat {width: calc(100% - 8px); height: calc(100vh - 8px); display: flex; flex-direction: column; margin: 4px;}
.messages {height: 100%; padding: 8px 8px 0 8px; display: flex; flex-direction: column-reverse; overflow: auto;}
.message-container-user, .message-container-assistant, .message-container-error {display: flex; margin: 8px 0;}
.message-container-user {justify-content: flex-end;}
.message-container-assistant {justify-content: flex-start;}
.message-container-error {justify-content: center;}
.message-content {white-space: pre-wrap;}
.message-container-user .message-content {background: #d5ecff; padding: 8px; border-radius: 8px 8px 0 8px;}
.message-container-assistant .message-content {background: #f1f1f1; padding: 8px; border-radius: 8px 8px 8px 0;}
.message-container-error .message-content {background: #ffdddd; padding: 2px 8px; border-radius: 8px;}
.chat-input {display: flex; justify-content: space-between; align-items: flex-end; bottom: 0; width: calc(100% - 16px); margin: 8px;}
.chat-input textarea {flex: 1; margin-right: 4px; line-height: 1.5; height: 40px; min-height: 40px; padding: 9px 36px 9px 12px; border: 1px solid transparent; border-radius: 8px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(225deg, #ff2070, #9670ff, #258dff) border-box; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; resize: none;}
.chat-input input[type=submit] {position: absolute; left: 236px; bottom: 12px; width: 40px; height: 40px; padding: 0; border: none; border-radius: 4px; outline: none; background: linear-gradient(225deg, #ff2070, #9670ff, #258dff); mask-image: url('data:image/svg+xml;utf8,'); -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-position: center; -webkit-mask-position: center; mask-origin: padding-box; -webkit-mask-origin: padding-box; background-repeat: no-repeat; background-position: center; background-size: 16px 15px; mask-size: 16px 15px; -webkit-mask-size: 16px 15px; cursor: pointer;}
.chat-input input[type=submit].disabled {cursor: unset; opacity: 0.5;}
.chat-input input[type=submit]:not(.disabled):hover {transform: scale(1.1);}
.chat-input textarea.has-scrollbar + input[type=submit] {left: 228px; width: 36px; mask-position: 20px 12.5px; -webkit-mask-position: 20px 12.5px; background-position: 20px 12.5px;}
.chat-input textarea.busy, .chat-input input[type=submit].busy {cursor: wait; opacity: 0.5;}
#reset {height: 40px; border: none; background: none; color: #9ea3b0; border-radius: 4px;}
#reset.disabled {cursor: unset; opacity: 0.5;}
#reset:not(.disabled):hover {color: #737a8c;}
#reset.busy, #retry.busy {cursor: wait; opacity: 0.5;}
::-webkit-scrollbar-thumb {border-radius: 5px;}
::-webkit-scrollbar {width: 10px; height: 10px;}
::-webkit-scrollbar-thumb:vertical {box-shadow: inset 1px 1px 0 rgb(0 0 0 / 10%), inset 0 -1px 0 rgb(0 0 0 / 7%); background-color: rgba(0, 0, 0, 0.2); border-radius: 10px; opacity: 0; transition: opacity 0.1s;}
::-webkit-scrollbar, ::-webkit-scrollbar-button, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {visibility: hidden; opacity: 0;}
:hover ::-webkit-scrollbar, :hover ::-webkit-scrollbar-button, :hover ::-webkit-scrollbar-track, :hover ::-webkit-scrollbar-thumb {visibility: visible; opacity: 1;}
.messages::-webkit-scrollbar-track {margin: -30px 0;}
.chat-input textarea::-webkit-scrollbar {width: 8px;}