/* Custom styles for the scrollbar to match dark mode */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #374151; /* Darker grey for track */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #6B7280; /* Medium grey for thumb */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #9CA3AF; /* Lighter grey on hover */
}

/* Ensure Inter font is used */
body {
    font-family: 'Inter', sans-serif;
}

/* Basic modal backdrop styling */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Style for highlighting search results */
.highlight {
    background-color: #FACC15; /* Tailwind yellow-400 */
    color: #1F2937; /* Tailwind gray-800 */
    padding: 0 2px;
    border-radius: 2px;
}

/* Markdown specific styling for code blocks and preformatted text */
/* These styles are for general markdown rendering, potentially for preview snippets */
.markdown-body pre {
    background-color: #1F2937; /* Darker gray for code blocks */
    color: #E5E7EB; /* Light gray text */
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto; /* Enable horizontal scrolling for long lines */
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; /* Monospace font for code */
    font-size: 0.9rem;
    line-height: 1.4;
}

.markdown-body code {
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; /* Monospace font for inline code */
    background-color: #4B5563; /* Slightly lighter gray for inline code */
    color: #FACC15; /* Yellow for inline code to stand out */
    padding: 0.2em 0.4em;
    border-radius: 0.3rem;
    font-size: 0.85em;
}

/* Basic styling for other markdown elements for readability */
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
    color: #F9FAFB; /* Lighter headings */
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: bold;
}

.markdown-body p {
    margin-bottom: 1em;
}

.markdown-body ul, .markdown-body ol {
    margin-left: 1.5em;
    margin-bottom: 1em;
    list-style-type: disc; /* Default list style */
}

.markdown-body ol {
    list-style-type: decimal;
}

.markdown-body a {
    color: #60A5FA; /* Blue for links */
    text-decoration: underline;
}

.markdown-body blockquote {
    border-left: 4px solid #6B7280; /* Gray border for blockquotes */
    padding-left: 1em;
    margin-left: 0;
    color: #9CA3AF; /* Lighter text for blockquotes */
    font-style: italic;
}

.markdown-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.markdown-body th, .markdown-body td {
    border: 1px solid #4B5563;
    padding: 0.5em;
    text-align: left;
}

.markdown-body th {
    background-color: #374151;
    font-weight: bold;
}

/* Styling for code blocks with copy button */
/* This container is for code blocks rendered in the view modal */
.code-block-container {
    background-color: #1F2937; /* Tailwind gray-800 */
    border-radius: 0.5rem; /* rounded-lg */
    padding: 1rem; /* p-4 */
    padding-right: 2.5rem; /* Space for copy button on the right */
    position: relative;
    overflow: hidden; /* Ensures button doesn't overflow rounded corners */
    margin-bottom: 1rem; /* Add some space below code blocks */
    border: 1px solid #4B5563; /* Frame for code blocks */
}

.code-block-container pre {
    margin: 0; /* Remove default margin from pre */
    overflow-x: auto; /* Enable horizontal scrolling for long lines */
}

.code-block-container code {
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace; /* Monospace font for code */
    font-size: 0.875rem; /* text-sm */
    color: #E5E7EB; /* Tailwind gray-200 */
    display: block; /* Ensures it takes full width and respects pre-wrap */
    white-space: pre-wrap; /* Preserve whitespace and wrap lines */
}

.copy-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0.5rem;
    background-color: #4B5563; /* Tailwind gray-600 */
    color: #F9FAFB; /* Tailwind gray-50 */
    padding: 0.4rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem; /* rounded-md */
    cursor: pointer;
    z-index: 10;
    font-size: 0.875rem; /* text-sm */
    transition: background-color 0.2s ease-in-out;
}

.copy-button:hover {
    background-color: #6B7280; /* Tailwind gray-500 */
}

/* Optional: Add some spacing for regular paragraphs if needed */
.markdown-body p {
    margin-bottom: 1em; /* Adds space below paragraphs */
}

/* New styles for mobile search bar when active */
@media (max-width: 767px) { /* Targeting screens smaller than 768px (Tailwind's md breakpoint) */
    .search-bar-mobile-active {
        position: fixed;
        top: 5px; /* Moved down by 5px */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Adjust for centering */
        width: calc(100% - 20px); /* Slightly less wide (10px padding on each side) */
        border-radius: 9999px; /* Keep it rounded */
        z-index: 50; /* Ensure it's above other content */
        padding: 1rem 1rem; /* Adjust padding if needed */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Add shadow */
    }

    /* Adjust padding and alignment for the main content area when search bar is active */
    body.search-active-mobile {
        padding-top: 5rem; /* Adjust based on search bar height + some margin */
        justify-content: flex-start; /* Align content to the top on mobile when search is active */
    }

    /* Adjust modal content padding for very small screens */
    .modal-backdrop > div { /* Targets the direct child of modal-backdrop (the modal content) */
        padding: 1.5rem !important; /* Reduce padding for smaller screens */
        margin-left: 1rem !important; /* Reduce horizontal margin */
        margin-right: 1rem !important; /* Reduce horizontal margin */
    }

    /* Adjust padding for inner sections of the admin panel on mobile */
    #adminPanelModal .bg-gray-700.p-6 {
        padding: 1rem !important; /* Even smaller padding for inner sections */
    }

    /* Admin Panel Modal specific vertical adjustments for mobile */
    #adminPanelModal #adminModalContent {
        max-height: 90vh; /* Limit height to 90% of viewport height */
        overflow-y: auto; /* Enable vertical scrolling within the modal content */
        padding-top: 1rem !important; /* Reduce top/bottom padding */
        padding-bottom: 1rem !important;
    }
}


/* --- Quill.js Custom Styles --- */

/* Ensure the editor container has its own border and rounded corners */
#editor-container {
    border: 1px solid #4B5563; /* Tailwind gray-600 */
    border-radius: 0.375rem; /* rounded-md */
    overflow: hidden; /* Ensure children respect border-radius */
}

/* Remove ALL default Quill borders, outlines, and shadows from Quill elements */
/* This is crucial to prevent Quill's default styling from interfering */
#editor-container .ql-toolbar.ql-snow,
#editor-container .ql-container.ql.snow {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Toolbar styling - Default (expanded) state */
.ql-toolbar.ql-snow {
    transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
    background-color: #1F2937; /* Match the editor container background */
    
    /* Force removal of all borders and padding */
    border: none !important; /* Ensure no border */
    border-width: 0 !important; /* Explicitly set border width to 0 */
    border-style: none !important; /* Explicitly set border style to none */
    border-color: transparent !important; /* Explicitly set border color to transparent */
    padding: 0 !important; /* Force no padding */
    outline: none !important; /* Ensure no outline */
    box-shadow: none !important; /* Ensure no shadow */

    /* Remove border-radius from toolbar itself, as parent container handles it */
    border-radius: 0 !important;
}

/* Make Quill toolbar icons white */
.ql-snow .ql-stroke {
    stroke: #F9FAFB !important; /* Tailwind gray-50 for white */
}

.ql-snow .ql-fill {
    fill: #F9FAFB !important; /* Tailwind gray-50 for white */
}

/* Make Quill dropdown text (labels and items) white */
.ql-snow .ql-picker-label,
.ql-snow .ql-picker-item {
    color: #F9FAFB !important; /* Tailwind gray-50 for white text */
}

/* Style Quill editor placeholder text */
#editor-container .ql-editor::before {
    color: #9CA3AF !important; /* Tailwind gray-400, matching title input placeholder */
    left: 1rem; /* Adjust placeholder position if needed */
    right: 1rem;
}


/* Ensure the toolbar fully collapses and is completely border-less */
.ql-toolbar.ql-snow.ql-toolbar-collapsed {
    height: 0 !important;
    padding: 0 !important; /* Combine padding-top and padding-bottom for brevity */
    margin-bottom: 0 !important;
    overflow: hidden !important;
    border: none !important; /* Explicitly set border to none when collapsed */
    outline: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    background-color: transparent !important; /* Make sure background isn't causing it if it's a gap */
}

/* Hide the actual toolbar buttons/formats when collapsed */
.ql-toolbar-collapsed .ql-formats {
    display: none !important;
}

/* Control the top border of the Quill editor content area */
/* When toolbar is expanded, the content area should have a top border */
#editor-container .ql-toolbar.ql.snow:not(.ql-toolbar-collapsed) + .ql-container.ql.snow {
    border-top: 1px solid #4B5563 !important; /* Show top border on content area when toolbar is expanded */
}

/* When toolbar is collapsed, the content area should NOT have a top border */
#editor-container .ql-toolbar.ql.snow.ql-toolbar-collapsed + .ql-container.ql.snow {
    border-top: none !important; /* Hide top border on content area when toolbar is collapsed */
    border-left: none !important; /* Ensure no side borders either */
    border-right: none !important;
    border-bottom: none !important; /* Ensure no bottom border */
}

/* NEW: Styling for Quill's code blocks within the editor */
/* This targets the <pre> element with class ql-syntax */
#editor-container .ql-editor pre.ql-syntax {
    background-color: #1F2937; /* Tailwind gray-800 */
    border: 1px solid #4B5563; /* Tailwind gray-600 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.75rem; /* p-3, slightly less than view mode to avoid double padding */
    margin-top: 0.5rem; /* Add some space above code blocks */
    margin-bottom: 0.5rem; /* Add some space below code blocks */
    color: #E5E7EB; /* Tailwind gray-200 */
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 0.875rem;
    overflow-x: auto; /* Enable horizontal scrolling */
    white-space: pre-wrap; /* Preserve whitespace and wrap lines */
}

/* Ensure the code inside the pre tag also inherits colors */
#editor-container .ql-editor pre.ql-syntax code {
    color: inherit; /* Inherit color from parent pre */
    font-family: inherit; /* Inherit font from parent pre */
}

/* Adjust Quill editor content area to fit within the new container border */
/* This rule was previously setting the background to gray-700, now it's just for border-radius */
#editor-container .ql-editor {
    border-bottom-left-radius: 0.375rem; /* rounded-md */
    border-bottom-right-radius: 0.375rem; /* rounded-md */
    background-color: #374151; /* Tailwind gray-700, matching title input */
}

/* NEW: Ensure pre.ql-syntax inside the view modal (when wrapped by code-block-container)
   does not have its own conflicting background or border, allowing the parent
   .code-block-container to provide the visual frame. */
#viewKnowledgeContent .code-block-container pre.ql-syntax {
    background-color: transparent !important; /* Ensure no background on the pre itself */
    border: none !important; /* Ensure no border on the pre itself */
    padding: 0 !important; /* Remove any padding from the pre, container handles it */
    margin: 0 !important; /* Remove any margin from the pre */
    color: inherit; /* Inherit text color from parent */
}