.container { margin-top: 20px; margin-bottom: 20px; width: 2500px; height: 700px; border: 1px solid black; overflow-y: scroll; background-color: white; position: relative; scroll-behavior: smooth; } .container::-webkit-scrollbar { width: 0; background-color: transparent; } .message-container { position: relative; display: flex; margin: 20px; max-width: 95%; word-wrap: break-word; padding-top: 0px; /* Add space for the button */ } .message-text { background-color: lightgray; border-radius: 10px; padding: 8px; margin-left: 40px; font-size: 10px; width: 100%; } .avatar { width: 40px; height: 40px; border-radius: 50%; position: absolute; top: 0px; left: -30px; margin-left: 20px; background-color: green; background-size: cover; } .role { font-size: 12px; font-weight: bold; position: absolute; bottom: 0; top: -30px; margin-top: 10px; margin-left: 40px; } .code-block pre { margin: 0; } .dark { color: #000000; } .line-numbers .line-numbers-rows { border-right-color: #44475a; display: block; /* Add this to ensure line numbers are displayed */ } .copy-button { position: absolute; top: 1px; right: 0px; background-color: #7a7c7f; color: #f8f8f2; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .code-block-header { background-color: #5b5656; color: #ffffff; padding: 5px; font-size: 14px; font-weight: bold; } .code-block { background-color: #000000 !important; border-radius: 4px; margin-top: 10px; position: relative; overflow: hidden; color: #000000; /* Add text color for syntax highlighting */ } table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; white-space: pre-line; } .expand-button { position: absolute; top: 2px; right: 2px; border-radius: 4px; background-color: transparent; border: none; padding: 5px; cursor: pointer; font-size: 8px; font-weight: bold; color: rgb(108, 99, 99); }