body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: white; /* Just in case some text is added later */
    font-family: sans-serif;
    display: flex;
    flex-direction: column; /* Changed to column to stack containers vertically */
    justify-content: center; /* Center the main-layout-wrapper vertically */
    align-items: center; /* Center the main-layout-wrapper horizontally */
    min-height: 100vh; /* Ensure it covers the full viewport height */
    box-sizing: border-box; /* Ensure padding/border are included in element's total width and height */
}

#main-layout-wrapper {
    display: flex;
    /* Align items to their top. The sidebar and main-content-area will align at the top. */
    align-items: flex-start;
    gap: 15px; /* Space between the sidebar and the main content area */
}

#sidebar {
    width: 100px;
    height: 75vh; /* Same height as the center-container */
    background-color: black; /* Consistent theme */
    border: 1px solid #555; /* Consistent theme */
    border-radius: 35px; /* Consistent theme */
    box-sizing: border-box;
}

#main-content-area {
    display: flex;
    flex-direction: column;
    /* Set its width to ensure it matches the original total width requirement */
    width: 75vw;
    gap: 10px; /* Space between center-container and bottom-container */
    box-sizing: border-box;
}

#center-container {
    width: 100%; /* Takes full width of main-content-area */
    height: 75vh; /* 75% of viewport height */
    background-color: black; /* Changed to black as requested */
    border: 1px solid #555; /* Optional: add a subtle border */
    border-radius: 35px; /* Added border radius */
    /* Removed margin-bottom, gap in #main-content-area handles spacing */
    box-sizing: border-box; /* Ensure padding/border are included in element's total width and height */
    
    display: flex; /* Make it a flex container */
    flex-direction: column; /* Stack children vertically */
    padding: 0; /* Removed padding from center-container, now messages-display will handle it */
    overflow: hidden; /* Hide any overflow from messages-display to prevent scrollbar issues */
    position: relative; /* Needed for absolute positioning of scroll indicators */
}

#messages-display {
    flex-grow: 1; /* Takes up all available space within #center-container */
    overflow-y: scroll; /* Enable vertical scrolling */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between messages */
    scroll-behavior: smooth; /* Smooth scroll behavior */

    /* Hide default scrollbar */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */

    /* Adjusted padding for the new vertical scrollbar on the right */
    padding: 15px;
    padding-right: 55px; /* Adjust based on vertical-scroll-bar width + its right margin + some extra space */
}

/* For Chrome, Safari, Opera */
#messages-display::-webkit-scrollbar {
    display: none;
}

/* New Vertical Scroll Bar Container */
#vertical-scroll-bar {
    position: absolute;
    right: 15px;
    top: 15px;
    bottom: 15px;
    width: 40px; /* Bigger as requested */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px; /* Space between buttons and track */
    z-index: 10;
    opacity: 0; /* Hidden by default, JS controls visibility */
    pointer-events: none; /* Disable interaction when hidden */
    transition: opacity 0.3s ease;
    background: rgba(0,0,0,0.3); /* Subtle background for the bar itself */
    border-radius: 20px; /* Rounded ends for the whole bar */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
    padding: 5px 0; /* Vertical padding to push buttons slightly from ends */
}

/* Scroll Indicator Buttons (up/down arrows) */
.scroll-indicator-button {
    position: static; /* Within the flex container #vertical-scroll-bar */
    width: 30px; /* Bigger button size */
    height: 30px; /* Bigger button size */
    border-radius: 50%; /* Keep them round */
    background: rgba(0, 123, 255, 0.7); /* Match brilliant button color, with transparency */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 123, 255, 0.4);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    opacity: 1; /* Default visible, JS dims if at top/bottom */
    pointer-events: auto; /* Default enabled, JS disables if at top/bottom */
}

.scroll-indicator-button:hover {
    background: rgba(0, 123, 255, 0.9);
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.6);
}

.scroll-indicator-button i {
    font-size: 1.2em;
}

/* New Vertical Scroll Position Track */
#scroll-position-track {
    flex-grow: 1; /* Takes up available vertical space */
    width: 8px; /* Width of the track */
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1); /* Transparent background with subtle tint */
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    position: relative; /* For absolute positioning of the thumb */
    transition: background-color 0.3s ease;
}

/* New Vertical Scroll Position Thumb */
#scroll-position-thumb {
    position: absolute;
    left: 0;
    right: 0;
    top: 0; /* Will be updated by JS */
    height: 0%; /* Will be updated by JS */
    background-color: #007bff; /* Brilliant blue fill */
    border-radius: 4px;
    transition: height 0.1s linear, top 0.1s linear; /* Smooth transition for height/position change */
}

/* Base style for the message container */
.message-container {
    display: flex; /* Make it a flex container to align content and actions */
    align-items: flex-end; /* Align items to the bottom, so buttons are at the bottom of the bubble */
    gap: 8px; /* Space between message content and actions */

    max-width: 75%; /* Messages shouldn't take full width, slightly wider than before */
    word-wrap: break-word; /* Break long words */
    font-size: 1em; /* Slightly larger font */
    line-height: 1.4;
    opacity: 0; /* Start invisible for fade-in */
    transform: translateY(10px); /* Start slightly below for subtle slide-up */
    animation: fadeInSlideUp 0.3s ease-out forwards; /* Apply animation */
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style for the actual message bubble content */
.message-content {
    padding: 12px 18px; /* More generous padding */
    border-radius: 20px; /* Base roundedness */
    flex-shrink: 1; /* Allow it to shrink */
}

/* User message specific styles */
.message-container.user {
    align-self: flex-end; /* Align to the right */
    flex-direction: row-reverse; /* Put actions on the left for user messages */
    margin: 15px; /* Add margin to messages to push them away from the edge */
    margin-right: 25px; /* More space on the right for user messages */
    margin-left: 15px;
}

.message-container.user .message-content {
    background-color: #007AFF; /* A deeper, more saturated blue */
    color: white;
    border-radius: 20px 20px 5px 20px; /* Top-left, Top-right, Bottom-right (smaller for subtle tail effect), Bottom-left */
    box-shadow: 0 5px 12px rgba(0, 122, 255, 0.4); /* More pronounced, but soft shadow */
}

/* System message specific styles */
.message-container.system {
    align-self: flex-start; /* Align to the left */
    flex-direction: row; /* Default, actions on the right */
    margin: 15px; /* Add margin to messages to push them away from the edge */
    margin-left: 25px; /* More space on the left for system messages */
    margin-right: 15px;
}

.message-container.system .message-content {
    background-color: #4A4A4A; /* A medium-dark grey for better contrast */
    color: white;
    border-radius: 20px 20px 20px 5px; /* Top-left, Top-right, Bottom-right, Bottom-left (smaller for subtle tail effect) */
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3); /* Consistent shadow style */
}

/* New styles for the 'thinking' and 'thought process' messages */
.message-container.thinking-message {
    align-self: flex-start;
    flex-direction: row;
    max-width: 60%; /* A bit narrower for 'thinking' */
}
.message-container.thinking-message .message-content {
    background-color: #333; /* Darker grey */
    color: #bbb; /* Lighter text for a subdued look */
    font-style: italic;
    font-size: 0.9em;
    padding: 8px 15px;
    border-radius: 15px;
    box-shadow: none; /* No shadow for thinking */
    animation: pulseGlow 1.5s infinite alternate ease-in-out; /* Subtle pulsing effect */
}

@keyframes pulseGlow {
    from {
        box-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
    }
    to {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
    }
}

.message-container.thought-process {
    align-self: flex-start;
    flex-direction: row;
    max-width: 70%; /* Slightly narrower than full response */
    margin-bottom: 5px; /* Little less space before the main response */
}
.message-container.thought-process .message-content {
    background-color: #2b2b2b; /* A distinct, slightly darker grey for thought */
    color: #aaa;
    font-size: 0.85em; /* Smaller font for thought process */
    padding: 10px 16px;
    border-radius: 18px 18px 18px 5px; /* Similar to system but distinct corner */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Softer shadow */
    border-left: 3px solid #666; /* Visual cue */
}

.message-container.error-message {
    align-self: flex-start;
    flex-direction: row;
}
.message-container.error-message .message-content {
    background-color: #a00; /* Red background for errors */
    color: white;
    font-weight: bold;
    box-shadow: 0 5px 12px rgba(255, 0, 0, 0.4);
}

/* Message actions and buttons - now horizontal icons */
.message-actions {
    display: flex;
    flex-direction: row; /* Buttons are now horizontal */
    gap: 5px; /* Space between icon buttons */
    align-items: center; /* Vertically center buttons relative to each other */
    justify-content: center; /* Center buttons horizontally */
    opacity: 0.8; /* Subtle, but visible */
    padding: 0 5px; /* Add some padding around the button strip */
    min-height: 24px; /* Ensure there's enough space for icons */
}

.message-action-button {
    background: rgba(255, 255, 255, 0.15); /* Slightly more prominent background for icon buttons */
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white; /* SVG fill color, now applies to Font Awesome icon */
    width: 28px; /* Fixed width for icon button */
    height: 28px; /* Fixed height for icon button */
    padding: 0; /* No internal padding, icon will control size */
    border-radius: 50%; /* Make them circular */
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
    display: flex; /* Use flex to center icon inside button */
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Prevent buttons from shrinking */
    white-space: nowrap; /* Ensure text doesn't wrap when expanded */
    min-width: 28px; /* Ensure it doesn't shrink below original icon size */
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s, width 0.3s ease, padding 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease; /* Add transitions for new properties */
}

.message-action-button i { /* Style for Font Awesome icons */
    font-size: 16px; /* Size of the Font Awesome icon */
    line-height: 1; /* Ensure vertical alignment is correct */
}

.message-action-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05); /* Slight scale on hover */
}

.message-action-button:active {
    transform: scale(0.95);
}

/* Expanded state for copied button */
.message-action-button.copied {
    width: auto; /* Allow content to dictate width */
    padding: 0 12px; /* Horizontal padding for text and icon */
    border-radius: 15px; /* Slightly rounded corners */
    background-color: #28a745; /* Green for success */
    border-color: #218838;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
    transform: scale(1.05); /* Slight scale to emphasize */
    gap: 5px; /* Space between icon and text if content allows */
    color: white; /* Ensure text color is white for readability */
}

/* Styling for the editable textarea */
.edit-textarea {
    width: 100%; /* Take full width of its parent (.message-container) */
    height: auto; /* Adjust height based on content */
    min-height: 50px;
    border: 1px solid #007AFF;
    border-radius: 15px;
    background-color: #007AFF; /* Same as user message bubble */
    color: white;
    padding: 10px 15px;
    font-size: 1em;
    box-sizing: border-box;
    resize: vertical; /* Allow vertical resizing */
}
.edit-textarea:focus {
    outline: none;
    border-color: #0056b3;
}

/* New styles for generated images within a message bubble */
.generated-image {
    max-width: 100%; /* Ensure image fits within the bubble */
    height: auto;
    border-radius: 10px; /* Rounded corners for images */
    margin-top: 10px; /* Space between text and image */
    display: block; /* Make it a block element to control margin */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for images */
}

/* New styles for image loading indicator */
.image-loading-indicator {
    display: block;
    font-style: italic;
    color: #bbb;
    margin-top: 10px;
    font-size: 0.9em;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Styles for code blocks within messages */
.code-block-wrapper {
    background-color: #282c34; /* Dark background similar to code editors */
    border-radius: 8px;
    margin-top: 10px; /* Space from preceding text */
    position: relative; /* For absolute positioning of actions if needed, or just for context */
    padding: 10px; /* Padding around the entire code block content and actions */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    max-width: 100%; /* Ensure it fits its parent container */
    overflow: hidden; /* Hide any content overflowing the rounded corners */
}

.code-actions {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right */
    gap: 8px; /* Space between buttons */
    margin-bottom: 8px; /* Space between buttons and code content */
    padding-right: 5px; /* Little padding from right edge */
}

.code-actions .message-action-button {
    background: rgba(255, 255, 255, 0.1); /* Lighter background for code block buttons */
    border-color: rgba(255, 255, 255, 0.15);
}

.code-actions .message-action-button:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.code-block-wrapper pre {
    margin: 0; /* Remove default pre margin */
    padding: 0 5px; /* Add horizontal padding directly to pre for scrollbar visibility */
    white-space: pre-wrap; /* Preserve whitespace and wrap long lines */
    word-break: break-all; /* Break long words if necessary */
    overflow-x: auto; /* Allow horizontal scrolling for very long lines of code */
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; /* Monospace font for code */
    font-size: 0.9em;
    line-height: 1.5;
    color: #abb2bf; /* Text color for code */
}

.code-block-wrapper pre code {
    display: block; /* Ensure code block takes full width */
}

/* Override Prism.js default styles for scrollbars if necessary, 
   or ensure they blend with the dark theme */
.code-block-wrapper pre::-webkit-scrollbar {
    height: 8px;
}
.code-block-wrapper pre::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 4px;
}
.code-block-wrapper pre::-webkit-scrollbar-track {
    background-color: #333;
    border-radius: 4px;
}

/* Styling for the editable textarea within a code block */
.code-block-wrapper .edit-textarea {
    width: 100%;
    min-height: 100px; /* Give it more height for editing code */
    border: 1px solid #007AFF;
    border-radius: 5px;
    background-color: #1e1e1e; /* Darker background for editing */
    color: #d4d4d4;
    padding: 10px;
    font-size: 0.9em;
    box-sizing: border-box;
    resize: vertical;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    margin-top: 5px; /* Small margin from actions */
}
.code-block-wrapper .edit-textarea:focus {
    outline: none;
    border-color: #0096ff;
}

#bottom-container {
    width: 100%; /* Takes full width of main-content-area */
    height: 75px; /* Specified height */
    background-color: black; /* Keeping background consistent */
    border: 1px solid #555; /* Optional: add a subtle border */
    border-radius: 35px; /* Matched border radius to the first container */
    display: flex; /* Use flexbox to position the button and input */
    justify-content: space-between; /* Space out input and button */
    align-items: center; /* Vertically center content */
    padding: 10px; /* Add 10px padding on all sides to approximate from borders */
    box-sizing: border-box; /* Ensure padding/border are included in element's total width and height */
}

#chat-input {
    flex-grow: 1; /* Take up available space */
    height: 100%; /* Fill the height of the container's content area */
    margin-right: 10px; /* Space between input and button */
    border: 1px solid #444; /* Add a subtle border to the input field */
    border-radius: 35px; /* Same border-radius as containers */
    background-color: transparent; /* Changed to transparent as requested */
    color: white;
    padding: 0 20px; /* Horizontal padding for text, vertical controlled by height */
    font-size: 1em;
    outline: none; /* Remove outline on focus */
    box-sizing: border-box; /* Ensure padding is included in height */
    transition: border-color 0.3s ease; /* Smooth transition for border */
}

#chat-input:focus {
    border-color: #007bff; /* Highlight border on focus */
}

#chat-input::placeholder {
    color: #bbb; /* Lighter color for placeholder text */
}

#brilliant-button {
    background-color: #007bff; /* A vibrant blue */
    color: white;
    border: none;
    border-radius: 35px; /* Same border-radius as containers */
    width: 120px; /* Fixed width for the send button */
    height: 100%; /* Take full available height of the padded area */
    font-size: 1.1em; /* Slightly smaller font for the button text "Send" */
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.7); /* Brilliant glow effect */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease; /* Smooth transition on hover and active */
    display: flex; /* Use flex to center text inside the button */
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Ensure padding/border are included in element's total width and height */
}

#brilliant-button:hover {
    background-color: #0056b3; /* Darker blue on hover */
    box-shadow: 0 0 20px rgba(0, 123, 255, 1); /* More intense glow on hover */
}

#brilliant-button:active {
    transform: scale(0.98); /* Slightly shrink button on click for feedback */
}

#brilliant-button:disabled {
    background-color: #004d99; /* Darker blue when disabled */
    cursor: not-allowed;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3); /* Subtler glow when disabled */
    transform: none; /* No shrink effect when disabled */
}

/* Modal Styling */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
    justify-content: center; /* Center content */
    align-items: center; /* Center content */
}

.modal-content {
    background-color: #222;
    margin: auto;
    padding: 25px;
    border: 1px solid #888;
    border-radius: 20px;
    width: 80%; /* Could be more specific, e.g., 500px */
    max-width: 500px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.modal-content h2 {
    margin-top: 0;
    color: white;
    text-align: center;
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

#model-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px; /* Limit height for scrollability */
    overflow-y: auto;
    padding-right: 5px; /* Space for scrollbar */
}

.model-option {
    background-color: #333;
    color: #ddd;
    padding: 10px 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s, border 0.2s;
    border: 1px solid transparent;
}

.model-option:hover {
    background-color: #444;
}

.model-option.current-model {
    border-color: #007bff;
    background-color: #0056b3;
    font-weight: bold;
    color: white;
}

.model-option.selected {
    border-color: #00ff00; /* Green border for selected model */
    background-color: #008000; /* Darker green for selected */
    color: white;
}

#regenerate-modal-button {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 12px 20px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center; /* Center the button */
    width: fit-content;
    min-width: 150px;
}

#regenerate-modal-button:hover {
    background-color: #0056b3;
}

#regenerate-modal-button:disabled {
    background-color: #555;
    cursor: not-allowed;
    box-shadow: none;
}