body, html { height: 100%; margin: 0; } /* Stuff for message boxes */ #chat-messages .message-content pre { overflow-x: auto; white-space: pre; max-width: 662px; position: relative; border-radius: 8px; } #chat-messages .message-content pre code { display: inline-block; min-width: 100%; white-space: inherit; } .copy-button { position: absolute; top: 5px; right: 5px; } .content { font-size: 14px; line-height: 1.5; color: #ffffff; } /* Style for the overall chat container */ #chat-messages { max-width: 780px; margin: auto; width: 95%; margin-bottom: 180px; } /* Primary color */ :root { --bulma-body-background-color: #202020; --bulma-primary: #126d0f; } /* Chat input stuff */ .chat-input-container { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; bottom: 10px; left: 0; right: 0; padding: 10px; max-width: 800px; margin: 0 auto; z-index: 1; } .textarea-wrapper { position: relative; width: 100%; } .textarea { width: 100%; padding-right: 140px; /* Adjust this value based on the button and dropdown width */ box-sizing: border-box; } .button-group { position: absolute; bottom: 10px; right: 10px; display: flex; align-items: center; gap: 10px; } /* Indicator */ .my-indicator { display: none; } .htmx-request .my-indicator { display: inline; } .htmx-request.my-indicator { display: inline; } /* Logo */ svg text { font-family: 'Russo One', sans-serif; text-transform: uppercase; fill: #000; stroke: #000; font-size: 240px; } /* Custom Checkbox Styles */ .custom-checkbox { display: flex; align-items: center; font-size: 1rem; cursor: pointer; user-select: none; /* Prevent text selection */ } .custom-checkbox input { position: absolute; opacity: 0; /* Hide the default checkbox */ cursor: pointer; } .custom-checkbox .checkmark { position: relative; height: 14px; width: 14px; background-color: #eee; /* Light grey background */ border-radius: 4px; /* Rounded corners */ margin-right: 8px; /* Space between checkmark and label text */ border: 2px solid #ccc; /* Grey border */ } /* On mouse-over, add a grey background color */ .custom-checkbox:hover input~.checkmark { background-color: #ccc; } /* When the checkbox is checked */ .custom-checkbox input:checked~.checkmark { background-color: var(--bulma-primary, #126d0f); /* Primary color background */ border-color: var(--bulma-primary, #126d0f); } /* Create the checkmark/indicator (hidden when not checked) */ .custom-checkbox .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ .custom-checkbox input:checked~.checkmark:after { display: block; } /* Style the checkmark/indicator */ .custom-checkbox .checkmark:after { left: 4px; top: 1px; width: 3px; height: 6px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Message button styles */ .message-button { opacity: 0; transition: opacity 0.3s ease; } .message-user:hover .message-button { opacity: 1; } .message-bot:hover .message-button { opacity: 1; }