body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
}



/* Header content styling */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px; /* Reduced top and bottom padding */
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    position: relative; /* For positioning blinking text */
    flex-wrap: nowrap;  /* Prevent wrapping to keep buttons visible */
}
/* WritixChat title styling */
/* WritixChat title styling */
.header-title {
    font-size: 24px;
    font-weight: bold;
    color: #0168d9;
    white-space: nowrap; /* Prevent the text from wrapping */
}

/* Buttons container on the right */
.header-buttons {
    display: flex;
    gap: 8px; /* Reduced gap between buttons */
}

/* Smaller buttons styling */
.header-buttons .btn {
    font-size: 14px;
    padding: 4px 8px; /* Reduced padding for smaller buttons */
    border-radius: 5px;
    white-space: nowrap; /* Prevent button text from wrapping */
}

/* Animated/blinking text centered */
.blinking-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #555;
    animation: blink 4s linear infinite;
}

/* Blinking animation */
@keyframes blink {
    50% {
        opacity: 0;
    }
}

.container-fluid {
    padding-top: 80px; /* Adjust space for header */
}

.row {
    display: flex;
    height: calc(100vh - 110px);
}

#leftPanel {
    width: 17%;
    padding: 45px;
    background-color: #f0f0f0;
    overflow-y: auto;
    position: fixed;
    top: 80px; /* Adjust to space out from the header */
    bottom: 0;
    z-index: 5;
}

#middlePanel {
    width: calc(60% - 10px);
    margin-left: 22%;
    padding: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#rightPanel {
    width: calc(20% - 10px);
    margin-left: 44%; /* Increase the left margin to push it to the right */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}

#output {
    word-wrap: break-word; /* Break long words to prevent overflow */
    white-space: pre-wrap; /* Preserve formatting while allowing wrapping */
    
    overflow-y: auto; /* Add scroll for overflow content */
    max-height: 800px; /* Adjust this height based on your layout */
    overflow-y: auto;
    margin-bottom: 1px; /* Add some space above the input box */
}
/* Reduce spacing between messages */
.message-container,
.thinking-message,
.error-message {
    margin-bottom: 1px;
}
/* Ensure the input box stays fixed at the bottom */
#input-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 10px;
    border-top: 1px solid #ddd;
}
/* Style for live writing simulation */
#live-writing {
    white-space: pre-wrap;
    display: inline-block;
}


#messageInput {
    flex-grow: 1;
    max-height: 80px; /* Limit the maximum height */
    overflow-y: auto;
    resize: none; /* Prevent manual resizing */
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    width: 100%;
    padding: 10px; /* Adjust padding */
}


/* Attach button styling */
#attachButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #f0f0f0;
    border-radius: 50%;
    text-align: center;
    border: 1px solid #ccc;
}


#imageInput {
    display: block;
}

/* Styling for the output messages */
.output-area {
    margin-bottom: 20px;
}

.user-message {
    font-weight: bold;
    margin-bottom: 5px;
}

#imagePreview {
    max-width: 300px;         /* Larger image size */
    max-height: 300px;
    height: auto;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
    margin-bottom: 10px;      /* Space below the image */
}
/* Optional: Hover effect to slightly enlarge the image */
#imagePreview:hover {
    transform: scale(1.05);   /* Slightly enlarge the image on hover */
}

/* Send button styling */
#sendMessageButton {
    width: 40px;
    height: 40px;
    background-color: #0db098;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#sendMessageButton i {
    font-size: 18px;
}

/* Style for the image preview */
#imagePreviewContainer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}



.chat-history-item {
    padding: 10px;
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.chat-history-item:hover {
    background-color: #e0e0e0;
}

.dropdown-button {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 5px;
    font-size: 16px;
    line-height: 1;
    color: #333;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    z-index: 10;
    display: none;
}

.dropdown-item {
    padding: 5px 10px;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f0f0f0;
}

textarea::placeholder {
    font-weight: regular;
    font-size: 1.2em;
    padding: 0px 20px;
}

.footer {
    text-align: center;
    padding: 10px;
    background-color: #f8f9fa;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 18px;
    z-index: 100;
    color: #0168d9;
    font-weight: bold;
    box-shadow: 0 2px 4px #0168d9(161, 4, 4, 0.1);
}

.thinking-message {
    display: flex;
    align-items: center;
    gap: 8px;
    font-style: italic;
    color: #666;
}
.thinking-message img {
        width: 24px;
        height: 24px;
    }
    .thinking-message strong {
        font-weight: 600;
    }

.error-message {
    color: red;
    font-weight: bold;
}


.code-block {
    background-color: #000; /* Black background */
    color: #fff;            /* White text color */
    padding: 10px;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    overflow-x: auto;       /* Horizontal scroll for long lines */
    white-space: pre-wrap;  /* Preserve formatting and wrap long lines */
    line-height: 1.5;
}

/* Styling for the code block container */
/* Styling for the code block container */
pre {
    background-color: #000;       /* Black background for the entire code block */
    color: #fff;                  /* White text color for readability */
    padding: 15px;                /* Add padding inside the code block */
    border-radius: 5px;           /* Optional: rounded corners */
    overflow-x: auto;             /* Enable horizontal scroll for long lines */
    white-space: pre-wrap;        /* Preserve formatting and allow wrapping */
    font-family: 'Courier New', Courier, monospace; /* Monospaced font for code */
    line-height: 1.5;             /* Improve line spacing */
    display: block;               /* Ensure block-level display */
    width: 100%;                  /* Full width for the container */
    margin: 0;                    /* Remove default margin */
    border: none;                 /* Remove any default border */
}

/* Ensure all inline code elements have a black background */
code {
    font-size: 14px;
    color: #fff;                  /* White text for inline code */
    background-color: #000;       /* Black background for inline code */
    padding: 2px 5px;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace; /* Consistent font for inline code */
}

/* Ensure that any code block inside a pre tag also has a black background */
pre code {
    display: block;
    background-color: inherit;    /* Inherit the black background from pre */
    color: inherit;               /* Inherit white text color */
    padding: 0;                   /* Remove extra padding */
    margin: 0;                    /* Remove extra margin */
}


.edit-buttons {
    margin-top: 5px;
}

.edit-buttons button {
    margin-right: 5px;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.cancel-button {
    background-color: #dc3545;
    color: white;
}

.resend-button {
    background-color: #28a745;
    color: white;
}

.edit-button {
    display: none;
    cursor: pointer;
    margin-left: 10px;
}
.message-container:hover .edit-button {
    display: inline-block;
}
.edit-buttons {
    margin-top: 5px;
}

.thinking-message, .error-message {
    color: grey;
    font-style: italic;
}

/* Modal styling for full-size image preview */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}
.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}
.close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.edit-textarea {
    resize: vertical;
    width: 100%;
}

/* ✅ Reduce paragraph spacing for tighter flow */
#output p.ai-paragraph {
    margin-top: 4px;
    margin-bottom: 4px;
    line-height: 1.5;
}

/* ✅ Reduce spacing in response buttons */
.response-footer {
    margin-top: 4px;
    gap: 8px;
}

/* Optional: Compact feedback block */
.feedback-buttons {
    margin-top: 6px;
    gap: 6px;
}