html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; background-color: #121212; color: white; font-family: Arial, sans-serif; } p { margin-top: 0; margin-bottom: 0rem; } a { color: #32a4e0; text-decoration: none; } a:hover { color: #1e8ac6; /* Optional: Darker shade on hover */ text-decoration: underline; } .bg-dark { background-color: #121212 !important; } .chat-container { display: flex; flex-direction: column; height: 100%; } .navbar { flex-shrink: 0; } .chat-box { display: flex; flex-direction: column; flex-grow: 1; background-color: #1e1e1e; overflow: hidden; } .messages { flex-grow: 1; overflow-y: auto; padding: 20px; background-color: #2e2e2e; border-radius: 5px; display: flex; flex-direction: column; } .message { margin-bottom: 10px; padding: 10px; border-radius: 5px; } .alert { margin-top: 10px; text-align: center; /* Center the text content */ display: flex; /* Make sure the alert is a flex container */ justify-content: center; /* Center flex items horizontally */ align-items: center; /* Center flex items vertically (if needed) */ } body, .container { background-color: transparent; } /* Success Alert - Blue Theme */ .alert-success { background-color: #000000; /* Blue background similar to your button */ color: white; /* White text */ border: none; /* Remove border */ padding: 10px 20px; /* Padding for spacing */ border-radius: 5px; /* Rounded corners */ text-align: center; /* Center text */ display: flex; /* Flex layout */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ } /* Error Alert - Maroon Red Theme */ .alert-danger { background-color: #800000; /* Maroon red background */ color: white; /* White text */ border: none; /* Remove border */ padding: 10px 20px; /* Padding for spacing */ border-radius: 5px; /* Rounded corners */ text-align: center; /* Center text */ display: flex; /* Flex layout */ justify-content: center; /* Center horizontally */ align-items: center; /* Center vertically */ } /* Common alert styles */ .alert { margin-top: 10px; /* Add margin at the top */ font-size: 14px; /* Adjust the font size for readability */ } .message.user { background-color: #3a3a3a; color: white; } .message.assistant { background-color: #282828; color: #f1f1f1; } .form-control { background-color: #2e2e2e; color: white; border-color: #444; } .form-control:focus { background-color: #2e2e2e; color: white; border-color: #888; } pre code { background-color: #1e1e1e; color: #f8f8f2; padding: 10px; border-radius: 5px; display: block; white-space: pre-wrap; word-wrap: break-word; } .copy-button { background-color: #444; color: white; border: none; cursor: pointer; padding: 5px; margin-top: 5px; margin-bottom: 5px; display: inline-block; } .copy-button:hover { background-color: #555; } .input-area { background-color: #1e1e1e; padding: 10px 20px; z-index: 10; flex-shrink: 0; color: white; } .footer { flex-shrink: 0; text-align: center; padding: 10px; background-color: #121212; } .copy-button { background-color: #444; /* Button background color */ color: white; /* Button text color */ border: none; /* Remove border */ cursor: pointer; /* Pointer cursor for interaction */ padding: 5px 10px; /* Adjusted padding for smaller size */ margin-top: 5px; /* Space at the top */ display: inline-block; /* Keep the button in line */ font-size: 14px; /* Slightly smaller font size for compactness */ width: 147px; /* Prevent the button from stretching */ text-align: left; /* Align the text left */ } .copy-button-code { background-color: #444; /* Button background color */ color: white; /* Button text color */ border: none; /* Remove border */ cursor: pointer; /* Pointer cursor for interaction */ padding: 5px 10px; /* Adjusted padding for smaller size */ margin-top: 5px; /* Space at the top */ display: inline-block; /* Keep the button in line */ font-size: 14px; /* Slightly smaller font size for compactness */ width: 56px; /* Prevent the button from stretching */ text-align: left; /* Align the text left */ } .copy-button:hover { background-color: #555; /* Darker shade on hover */ } /* Add animations for the alerts */ @keyframes fadeSlideIn { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeSlideOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } /* Success Alert with fade-in and slide-down animation */ .alert { opacity: 0; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; display: flex; justify-content: center; align-items: center; animation: fadeSlideIn 0.5s forwards; } /* Add class for fading out when alert is being removed */ .alert.fade-out { animation: fadeSlideOut 0.5s forwards; } /* Dropdown menu styling */ .navbar .dropdown-menu { background-color: #1e1e1e; /* Match the chat box background */ border: none; /* Remove border */ box-shadow: none; /* Remove shadow */ padding: 0; /* Remove padding */ } .navbar .dropdown-item { background-color: #1e1e1e; /* Match the chat box background */ color: white; /* White text */ padding: 10px 20px; /* Add padding for spacing */ border-bottom: 1px solid #444; /* Add a subtle separator */ } .navbar .dropdown-item:last-child { border-bottom: none; /* Remove border for the last item */ } .navbar .dropdown-item:hover { background-color: #282828; /* Slightly lighter background on hover */ color: #f1f1f1; /* Lighter text on hover */ } .navbar .dropdown-item:focus { background-color: #282828; /* Match hover style for focused items */ outline: none; /* Remove default outline */ } .navbar .dropdown-toggle { color: white; /* White text */ } .navbar .dropdown-toggle::after { border-top: 0.3em solid white; /* White arrow for dropdown */ } .navbar .dropdown-menu.show { opacity: 1; /* Fully opaque when shown */ transform: translateY(0); /* Reset transform */ transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth fade and slide transition */ } .navbar .dropdown-menu { opacity: 0; transform: translateY(-10px); /* Start hidden and slightly raised */ transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth fade and slide transition */ } /* Styling the dropdown toggle button */ .navbar .dropdown-toggle:hover { color: #f1f1f1; /* Lighter text on hover */ } /* Separator between regular menu items and dropdown */ .navbar .separator { color: #555; /* Subtle separator color */ }