/* Main Styles */
body {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Fix for FontAwesome icons appearing italic */
.fas, .far, .fab, .fa {
    font-style: normal !important;
}

/* Header Styles */
header.navbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 1rem;
}

.navbar-brand {
    font-size: 1.5rem;
    letter-spacing: 0.05rem;
}

.nav-link.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 3px;
    padding: 0.25rem 0.75rem;
    padding-right: 7px !important;
    background-color: #ff0000;
    transition: all 0.2s ease;
}

.nav-link.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}

/* Sidebar Styles */
#sidebar {
    height: auto; /* Changed from fixed height to auto */
    position: sticky;
    top: 56px; /* Height of the navbar */
    border-right: 1px solid #dee2e6;
    overflow-y: auto;
    z-index: 100;
    padding-bottom: 2rem;
}

/* Footer Styles */
.footer {
    margin-top: auto;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1030; /* Ensure footer stays above other content */
}

/* Extra spacing to prevent content from being hidden behind footer */
.footer-spacing {
    height: 150px; /* Generous space to ensure nothing gets hidden */
    margin-bottom: 20px;
}

/* Footer layout when sidebar is collapsed */
.footer-expanded .col-md-2 {
    width: 0 !important;
    padding: 0 !important;
}

.footer-expanded .col-md-10 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
}

#footer-actions {
    transition: all 0.3s ease;
    width: 100%;
}

#create-chapter-btn {
    padding: 0.5rem 2rem;
    font-size: 1rem;
    border-radius: 2rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#create-chapter-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Old 576px breakpoint removed as requested */

@media (max-width: 768px) {
    /* Mobile layout adjustments */
    #sidebar {
        position: relative;
        top: 0;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        height: auto;
    }

    /* Apply column layout to content rows but NOT the footer row */
    .container-fluid .row:not(#footer-row) {
        flex-direction: column;
    }

    .col-md-10 {
        width: 100%;
        margin-left: 0 !important;
    }

    #sidebar-handle {
        display: none; /* Hide sidebar handle on mobile */
    }

    /* Content area adjustments */
    .col-md-10 {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Format dropdown adjustments - show only icon at 768px */
    .content-type-display {
        padding: 0.375rem 0.75rem;
        border-radius: 0.25rem;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        min-height: 38px;
    }

    /* Hide the text but keep the icon */
    .content-type-text {
        display: none;
    }

    /* Hide dropdown caret */
    .content-type-display.dropdown-toggle::after {
        display: none;
    }

    /* Footer adjustments for mobile - match content area button style */
    #footer-actions .btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.25rem;
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }

    #footer-actions .button-text {
        display: none; /* Hide text in footer buttons */
    }

    /* Footer layout adjustments for mobile */
    #footer-row {
        align-items: center;
        justify-content: space-between; /* Push items to opposite sides */
    }

    /* Hide strapline on mobile */
    #footer-row .col.text-center {
        display: none;
    }

    /* Ensure footer is properly spaced */
    .footer {
        padding: 0.5rem 0;
    }
}

/* Footer strapline */
.strapline {
    font-size: 1.4rem;
    letter-spacing: 0.05rem;
    padding: 0.5rem 0;
}

/* Project List Customization */
.project-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-item {
    margin-bottom: 0.75rem;
    position: relative;
}

.project-card {
    padding: 0.75rem 0.5rem;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-left: 4px solid transparent;
}

/* Add project toggle icon styling */
.project-toggle {
    margin-right: 0.125rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    cursor: pointer;
}

.project-toggle-icon {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

/* Current project styling */
.project-card.project-current {
    border-left: 4px solid #00FF00;
    margin-bottom: 0rem; /* Increased spacing below current project */
    color: #ffffff;
}

/* Retro color palette for project cards */
:root {
    --project-color-0-accent: #dd00dd;
    --project-color-1-accent: #00dddd;
    --project-color-2-accent: #961132;
    --project-color-3-accent: #dddd00;
    --project-color-4-accent: #dd0000;
    --project-color-5-accent: #0000dd;
    --project-color-6-accent: #dd7700;
    --project-color-7-accent: #dd44dd;
}

.project-color-0 { background-color: rgba(85, 0, 85, 0.7); }
.project-color-1 { background-color: rgba(0, 85, 85, 0.7); }
.project-color-2 { background-color: rgba(150, 17, 50, 0.7); }
.project-color-3 { background-color: rgba(85, 85, 0, 0.7); }
.project-color-4 { background-color: rgba(85, 0, 0, 0.7); }
.project-color-5 { background-color: rgba(0, 0, 85, 0.7); }
.project-color-6 { background-color: rgba(128, 64, 0, 0.7); }
.project-color-7 { background-color: rgba(85, 42, 85, 0.7); }

.project-card.project-current {
/* ignore for now*/
}

.project-card.project-current .project-title {
    color: #ffffff;
}

/* Project card no longer has hover effect */

.project-title {
    font-weight: 600;
    margin: 0;
    margin-left: 0.125rem;
    color: inherit;
    text-align: left;
    flex: 1;
}

.project-actions {
    display: flex;
    align-items: center;
}

.dropdown-menu {
    min-width: 200px;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
}

/* Ensure dropdown buttons align with regular buttons */
.chapter-controls .btn,
.chapter-controls .dropdown-toggle {
    /* Match height with the title input */
    line-height: 1.5;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    height: 38px; /* Match the height of the title input */
    display: flex;
    align-items: center;
}

.dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

/* Add more space between icon and text in dropdown items */
.content-type-item {
    display: flex;
    align-items: center;
}

.content-icon {
    display: inline-block;
    width: 24px;
    margin-right: 0.75rem;
    text-align: center;
}

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

.dropdown-item.text-danger:hover {
    background-color: #f8d7da;
}

.dropdown-divider {
    margin: 0.25rem 0;
}

.note-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0 0;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

.note-list::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 55%;
    transform: translateX(-50%);
    width: 45px;
    height: 0;
    border-bottom: 2px dashed rgba(0, 255, 0, 0.2);
}

.note-item {
    margin: 0.5rem 0;
}

.note-card {
    background-color: transparent;
    padding: 0.5rem 0;
    transition: all 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-left: 0px solid transparent;
    margin-left:0.75rem;
    padding-left:0.25rem;
    font-size: 1.1em;
    position: relative; /* Added for proper positioning of absolute elements */
}

.note-card:hover {
    color: #00AA00;
}

.note-card.active {
    color: #00FF00;
}

/* Archived styling */
.note-archived {
    color: #6c757d;
    font-style: italic;
}

.project-archived {
    opacity: 0.7;
    background-color: rgba(200, 200, 200, 0.2);
}

.note-project-title {
    margin-top: 2px;
    font-size: 0.8rem;
    font-style: italic;
}

.archived-chapter {
    opacity: 0.8;
    border-left-color: #6c757d;
}

.archived-indicator {
    font-size: 0.8em;
    opacity: 0.8;
}

/* Chapter archive toggle button */
#chapter-archive-toggle-btn,
#chapter-move-toggle-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    height: 38px;
    width: 38px;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

#chapter-archive-toggle-btn:hover,
#chapter-move-toggle-btn:hover {
    background-color: #f0f0f0;
}

/* Move active state */
#chapter-move-toggle-btn.move-active {
    background-color: #00FF00 !important;
    border-color: #00FF00 !important;
    color: black !important;
}

#chapter-move-toggle-btn.move-active:hover {
    background-color: #00DD00 !important;
    border-color: #00DD00 !important;
    color: black !important;
}

/* Note card move mode styles */
.note-card.move-destination:hover {
    background-color: rgba(0, 220, 0, 0.1);
    border-radius: 0.25rem;
}

.note-card.move-destination.active {
    border-left: 4px solid #00FF00;
    padding-left: 0.5rem;
}

.note-card.move-destination::after {
    content: "⏎";
    margin-left: 0.5rem;
    font-size: 0.9em;
    opacity: 0.7;
}

/* Chapter checkboxes for move functionality */
.chapter-checkbox {
    display: none;
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
}

.chapter-checkbox input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    cursor: pointer;
}

.move-mode-active .chapter-checkbox {
    display: block;
}

.move-mode-active .chapter-title-wrapper::before {
    display: none;
}

.move-mode-active .chapter-title-input {
    padding-left: 2.5rem;
}

.note-title {
    margin-left: 3px;
    font-size: 1.1rem;
}

/* Folder styles */
.folder-item, .subfolder-item {
    margin-bottom: 5px;
}

.folder-header, .subfolder-header {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.folder-header:hover, .subfolder-header:hover {
    /* background-color: #000000; */
}

.folder-name, .subfolder-name {
    flex-grow: 1;
    font-weight: 600;
}

.subfolder-list, .note-sublist {
    list-style: none;
    padding-left: 20px;
    margin: 0;
}

/* Dark theme compatibility */
body.dark-theme .folder-header,
body.dark-theme .subfolder-header {
    background-color: #2a2a2a;
}

body.dark-theme .folder-header:hover,
body.dark-theme .subfolder-header:hover {
    background-color: #3a3a3a;
}

/* Retro theme compatibility */
body.retro-theme .folder-header,
body.retro-theme .subfolder-header {
    background-color: var(--retro-bg-darkest);
    color: var(--retro-text-color);
    border-left: 2px solid var(--retro-accent-color);
}

/* Editable title styling */
.editable-title {
    position: relative;
    padding: 0.375rem 0.75rem;
    border: 1px dashed transparent;
    transition: all 0.2s ease;
    min-width: 150px;
    font-size: 1.5rem;
    line-height: 1.5;
    margin-bottom: 0;
    font-weight: 500;
    margin-top: 1rem !important;
}

.col-md-10.expanded .editable-title {
    /* Keep the same styling as normal state for consistency */
    padding-top: 0.375rem;
    margin-top: 1rem !important;
    font-size: 1.5rem;
}

.editable-title:hover {
    border-color: #dee2e6;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}

.editable-title:focus {
    outline: none;
    border-color: #86b7fe;
    background-color: white;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    border-radius: 0.25rem;
}

/* Copy link button styles */
.copy-note-link {
    color: #6c757d;
    opacity: 0.6;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.copy-note-link:hover {
    color: #0d6efd;
    opacity: 1;
}

/* Chapter Card Styles - Inline Editing */
.chapter-card {
    margin-bottom: 1.5rem;
    border-left: 4px solid #007bff;
    border-radius: 0.25rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    overflow: visible;
    position: relative;
}

.col-md-10.expanded .chapter-card:first-child {
    margin-top: 0;
}

.chapter-card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.chapter-header {
    padding: 1rem 1.25rem;
    background-color: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align to top */
    border-bottom: 1px solid #dee2e6;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chapter-title-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
}

.chapter-title-input {
    font-weight: 600;
    color: #212529;
    font-size: 1.4rem;
    border: 1px solid transparent;
    background-color: transparent;
    padding: 0.25rem 0.5rem 0.25rem 1.75rem;
    border-radius: 0.25rem;
    width: 100%;
    max-width: 400px;
    position: relative;
    height: 38px; /* Match the height of buttons */
}

.chapter-title-input:focus {
    outline: none;
    border-color: #86b7fe;
    background-color: white;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.chapter-title-wrapper::before {
    content: ">";
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 1.2rem;
    pointer-events: none;
    z-index: 1;
}

.chapter-title-wrapper:hover::before {
    color: #0d6efd;
}

.chapter-controls {
    display: flex;
    align-items: flex-start; /* Top align all controls */
    flex-wrap: wrap;
}

.chapter-controls .dropdown,
.chapter-controls .btn {
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
    vertical-align: top;
}

/* Make sure the delete button has no right margin since it should be at the edge */
.chapter-controls .btn:last-child {
    margin-right: 0;
}

/* Match the spacing with the footer buttons */
.chapter-controls .btn,
.chapter-controls .dropdown {
    margin-right: 0.5rem;
}

/* Position controls to the right side */
.chapter-controls {
    margin-left: auto;
    justify-content: flex-end;
}

.chapter-title-wrapper {
    min-width: 15ch;
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 400px;
    margin-right: 0.5rem;
}

/* Add a flexible spacer to push delete button to the right */
.flex-grow-1 {
    flex-grow: 1;
}

/* Toolbar breakpoints */
@media (max-width: 1200px) {
    .chapter-controls {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .chapter-header {
        flex-wrap: wrap;
    }
}

/* Medium screens */
@media (max-width: 900px) {
    .chapter-title-wrapper {
        max-width: 300px;
    }
}

/* Small screens */
@media (max-width: 768px) {
    .chapter-controls .dropdown,
    .chapter-controls .btn {
        margin-right: 0.5rem;
        margin-bottom: 0.25rem;
    }

    .chapter-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .chapter-title-wrapper {
        width: 100%;
        max-width: 100%;
        margin-bottom: 0.5rem;
    }

    .chapter-controls {
        width: 100%;
        margin-left: 0; /* Reset margin on mobile */
        justify-content: flex-start;
    }

    /* Keep the delete button at the end */
    .chapter-controls .btn:last-child {
        margin-right: 0;
    }

    #footer-actions .btn {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
}

.content-type-display {
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    height: 38px;
    display: flex;
    align-items: center;
}

.content-type-text,
.status-text,
.plugin-text {
    padding-top: 7px;
    padding-left: 5px;
    font-size: 14px; /* Make all dropdown text the same size */
}

/* Only show icon on medium screens */
@media (max-width: 1200px) {
    .content-type-text,
    .status-text,
    .plugin-text {
        display: none;
    }
}

.content-type-menu .dropdown-item.active {
    background-color: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
}

.content-type-menu .dropdown-item:active {
    color: #fff;
    background-color: #0d6efd;
}

.chapter-content {
    padding: 1.25rem 1.25rem 5px 1.25rem;
    background-color: #fff;
    position: relative;
    z-index: 5;
}

/* CodeMirror styling */
.CodeMirror {
    width: 100%;
    /* Changed to support dynamic height but with limits */
    min-height: 150px; /* Approx. 6 lines of text */
    max-height: calc(100vh - 230px);
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    /* Ensure consistent border width on all sides */
    border-width: 1px !important;
}

.CodeMirror-focused {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
}

/* Change indicator dot */
.editor-container {
    position: relative;
}

.change-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dc3545;
    display: none;
    z-index: 100;
    box-shadow: 0 0 0 2px white;
}

/* History button - removed absolute positioning to make it inline with other buttons */
.history-btn {
    font-size: 0.8rem;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.history-btn:hover {
    opacity: 1;
}

/* History modal styles */
/* Timeline slider styles */
#history-timeline-container {
    margin-top: 10px;
}

#history-timeline-slider {
    cursor: pointer;
}

#history-timeline-slider::-webkit-slider-thumb {
    background-color: #007bff;
    border-color: #007bff;
}

#history-timeline-slider::-moz-range-thumb {
    background-color: #007bff;
    border-color: #007bff;
}

#history-version-indicator {
    font-weight: bold;
}

/* History content container */
#history-content-container {
    height: 500px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
}

/* Ensure CodeMirror instance in history has proper height */
#history-content-container .CodeMirror {
    height: 100% !important;
    font-size: 0.9rem;
    border-radius: 4px;
}

#history-metadata {
    padding: 10px;
    font-size: 0.85rem;
    color: #666;
}

/* Dark theme support for history items */
body.dark-theme #history-content-container {
    background-color: #272822;
    border-color: #444;
}

/* Make sure the theme adapts when the user switches themes */
body.dark-theme #history-content-container .CodeMirror {
    border-color: #444;
}

body.dark-theme #history-metadata {
    color: #aaa;
}

/* Disabled slider styling */
#history-timeline-slider:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sidebar collapsible functionality */
#sidebar {
    /* Remove transition for immediate collapse/expand */
    z-index: 200;
}

/* Sidebar collapsed state */
#sidebar.collapsed {
    display: none;
}

/* Adjust content when sidebar is collapsed */
.col-md-10.expanded {
    width: 100% !important;
    margin-left: 0 !important;
    flex: 0 0 100% !important; /* Ensure it takes full width */
    max-width: 100% !important;
    padding-left: 20px !important; /* Add some padding on the left side */
}

/* Lint styling */
.CodeMirror-lint-markers {
    width: 16px;
}

.CodeMirror-lint-tooltip {
    background-color: #212529;
    border: 1px solid #495057;
    border-radius: 4px;
    color: #f8f9fa;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    padding: 0.5rem;
    z-index: 10000;
    max-width: 600px;
    overflow: hidden;
    white-space: pre-wrap;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.CodeMirror-lint-mark-error {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUM2OEZDQTg4RTU0MTFFMUEzM0VFRTM2RUY1M0RBMjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUM2OEZDQTk4RTU0MTFFMUEzM0VFRTM2RUY1M0RBMjYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQzY4RkNBNjhFNTQxMUUxQTMzRUVFMzZFRjUzREEyNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQzY4RkNBNjhFNTQxMUUxQTMzRUVFMzZFRjUzREEyNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkgXxbAAAAJbSURBVHjapFNNaBNBFH4zs5vdZLP5sQmNpT82QY209heh1ioWisaDRcSKF0WKJ0GQnrzrxasHsR6EnlrwD0TagxJabaVEpFYxLWlLSS822tr87m66ccfd2GKyVhA6MMybgfe97/vmPUQphd0sZjto9XIn9OOsvlu2nkqRzVU+6vvlzPf8W6bk8dxQ0NPbxAALgCgg2JkaQuhzQau/El0zbmUA7U0Es8v2CiYmKQJHGO1QICCLoqilMhkmurDAyapKgqItezi/USRdJqEYY4D5jCy03ht2yMkkvL91jTTX10qzyyu2hruPRN7jgbH+EOsXcMLgYiThEgAMhABW85oqy1DXdRIdvP1AHJ2acQXvDIrVHcdQNrEKNYSVMSZGMjEzIIAwDXIo+6G/FxcGnzkC3T2oMhLjre49sBB+RRcHLqdafK6sYdE/GGBwU1VpFNj0aN8pJbe+BkZyevUrvLl6Xmm0W9IuTc0DxrDNAJd5oEvI/KRsNC3bQyNjPO9yQ1YHcfj2QvfQc/5TUhJTBc2iM0U7AWDQtc1nJHvD/cfO2s7jaGkiTEfa/Ep8coLu7zmNmh8+dc5lZDuUeFAGUNA/OY6JVaypQ0vjr7XYjUvJM37vt+j1vuTK5DgVfVUoTjVe+y3/LxMxY2GgU+CSLy4cpfsYorRXuXIOi0Vt40h67uZFTdHo8bxGhKjqTmJHkvMVyhfFRFaukl8OCpJiAp3yx8SQglnB/HHBRWKbGRWCX4/P4KvACMRT2eMgCbY+y3Ap4t3H+kaTKeSV+0iA93zlmRVftEXqCkgh+10bpX8LuufOhTv+FwXfd+dECp+5/eTAAAAAElFTkSuQmCC");
}

.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUM2OEZDQTg4RTU0MTFFMUEzM0VFRTM2RUY1M0RBMjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUM2OEZDQTk4RTU0MTFFMUEzM0VFRTM2RUY1M0RBMjYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQzY4RkNBNjhFNTQxMUUxQTMzRUVFMzZFRjUzREEyNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQzY4RkNBNjhFNTQxMUUxQTMzRUVFMzZFRjUzREEyNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkgXxbAAAAJbSURBVHjapFNNaBNBFH4zs5vdZLP5sQmNpT82QY209heh1ioWisaDRcSKF0WKJ0GQnrzrxasHsR6EnlrwD0TagxJabaVEpFYxLWlLSS822tr87m66ccfd2GKyVhA6MMybgfe97/vmPUQphd0sZjto9XIn9OOsvlu2nkqRzVU+6vvlzPf8W6bk8dxQ0NPbxAALgCgg2JkaQuhzQau/El0zbmUA7U0Es8v2CiYmKQJHGO1QICCLoqilMhkmurDAyapKgqItezi/USRdJqEYY4D5jCy03ht2yMkkvL91jTTX10qzyyu2hruPRN7jgbH+EOsXcMLgYiThEgAMhABW85oqy1DXdRIdvP1AHJ2acQXvDIrVHcdQNrEKNYSVMSZGMjEzIIAwDXIo+6G/FxcGnzkC3T2oMhLjre49sBB+RRcHLqdafK6sYdE/GGBwU1VpFNj0aN8pJbe+BkZyevUrvLl6Xmm0W9IuTc0DxrDNAJd5oEvI/KRsNC3bQyNjPO9yQ1YHcfj2QvfQc/5TUhJTBc2iM0U7AWDQtc1nJHvD/cfO2s7jaGkiTEfa/Ep8coLu7zmNmh8+dc5lZDuUeFAGUNA/OY6JVaypQ0vjr7XYjUvJM37vt+j1vuTK5DgVfVUoTjVe+y3/LxMxY2GgU+CSLy4cpfsYorRXuXIOi0Vt40h67uZFTdHo8bxGhKjqTmJHkvMVyhfFRFaukl8OCpJiAp3yx8SQglnB/HHBRWKbGRWCX4/P4KvACMRT2eMgCbY+y3Ap4t3H+kaTKeSV+0iA93zlmRVftEXqCkgh+10bpX8LuufOhTv+FwXfd+dECp+5/eTAAAAAElFTkSuQmCC");
}

.CodeMirror-lint-marker-multiple {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUEyMEFEQ0I4RTU0MTFFMUEzM0VFRTM2RUY1M0RBMjYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUEyMEFEQ0M4RTU0MTFFMUEzM0VFRTM2RUY1M0RBMjYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFQTIwQURDOThFNTQxMUUxQTMzRUVFMzZFRjUzREEyNiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQTIwQURDQThFNTQxMUUxQTMzRUVFMzZFRjUzREEyNiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqUCxIQAAABoSURBVHjaYnz//j8DDF2+fJnxxIkTjN++fWMEidna2jI6OjoySkhIMMLUgNhbtmz5D8PfvztA/P//P1aL4UKMQAtBDCaYqStXrvwPYmPTiG4xjI9uMYyP4gLG/2g8sAQiivGi80EEYADYjhP1gAwMrwAAAABJRU5ErkJggg==");
    background-repeat: no-repeat;
    background-position: right bottom;
    width: 100%; height: 100%;
}

/* Dialog styling */
.CodeMirror-dialog {
    padding: 0.5rem;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.CodeMirror-dialog-top {
    border-bottom: 1px solid #dee2e6;
    top: 0;
}

.CodeMirror-dialog input {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
}

.editor-container {
    margin-bottom: 1rem;
}

.editor-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    background-color: #f8f9fa;
    padding: 0.5rem;
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.editor-container {
    position: relative;
    margin-bottom: 1rem;
}

.chapter-add-btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #0000FF;
    color: #0000FF;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    user-select: none;
}

.chapter-add-btn:hover {
    background-color: #0000FF;
    color: white;
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
    text-shadow: 0 0 2px white;
}

.chapter-add-btn-top {
    margin-bottom: -14px;
    top: -14px;
}

.chapter-add-btn-bottom {
    margin-top: -14px;
    bottom: -14px;
}

.fullscreen-toggle {
    color: #6c757d;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.fullscreen-toggle:hover {
    color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.1);
}

/* Adjust CodeMirror borders to match toolbar */
.editor-toolbar + .CodeMirror {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-color: transparent;
}

/* For when we're in fullscreen mode */
body.editor-fullscreen-active {
    overflow: hidden;
}

.chapter-actions {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1.25rem;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.inline-edit-chapters .chapter-card {
    margin-bottom: 2rem;
}

/* New Project button styling */
#create-project-btn {
    white-space: nowrap;
    font-size: 0.95rem;
    padding: 0.3rem 0.6rem;
    height: auto;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
}

#create-project-btn i {
    font-size: 0.95rem;
    margin-right: 0.4rem !important;
}

/* Default: Show full text for wide sidebar */
#create-project-btn .project-text-full {
    display: inline;
}

#create-project-btn .project-text-short {
    display: none;
}

/* Medium screens: Show short text when sidebar is narrow but still a sidebar */
@media (max-width: 1450px) and (min-width: 768px) {
    #create-project-btn .project-text-full {
        display: none;
    }

    #create-project-btn .project-text-short {
        display: inline;
    }
}

/* Small screens (mobile): Show full text again when sidebar spans the width */
@media (max-width: 767px) {
    #create-project-btn .project-text-full {
        display: inline;
    }

    #create-project-btn .project-text-short {
        display: none;
    }
}

/* Very small screens: Show only icon */
@media (max-width: 400px) {
    #create-project-btn .project-text-full,
    #create-project-btn .project-text-short {
        display: none;
    }

    #create-project-btn i {
        margin-right: 0 !important;
    }
}

/* Sidebar toggle button styling */
#sidebar-toggle-btn {
    padding: 0.15rem 0.5rem;
    font-size: 0.875rem;
    height: 28px;
    line-height: 1;
}

#sidebar-toggle-btn .toggle-icon {
    font-weight: bold;
}

/* Sidebar sort and filter buttons */
#sidebar-sort-btn,
#sidebar-archive-btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s ease;
}

#sidebar-sort-btn:hover,
#sidebar-archive-btn.btn-outline-secondary:hover {
    background-color: #f0f0f0;
}

#sidebar-archive-btn.archive-active,
#chapter-archive-toggle-btn.archive-active {
    background-color: #00FF00 !important;
    border-color: #00FF00 !important;
    color: black !important;
}

#sidebar-archive-btn.archive-active:hover,
#chapter-archive-toggle-btn.archive-active:hover {
    background-color: #00DD00 !important;
    border-color: #00DD00 !important;
    color: black !important;
}

.sort-text, .archive-text, .filter-text {
    font-size: 14px;
}

/* Button Styles */
.btn {
    border-radius: 0.25rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    transition: all 0.2s ease-in-out;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-success {
    background-color: #198754;
    border-color: #198754;
}

.btn-success:hover {
    background-color: #157347;
    border-color: #146c43;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-action {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.btn-text {
    background: none;
    border: none;
    color: #6c757d;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    transition: all 0.15s ease;
}

.button-text:hover, .button-text:focus {
    color: #0d6efd;
    background: none;
    box-shadow: none;
    text-decoration: underline;
}

/* Animation for notifications */
@keyframes slideIn {
    0% { opacity: 0; transform: translateY(-20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.alert-notification {
    animation: slideIn 0.3s ease forwards;
}

/* Highlight new chapter */
.highlight-new {
    animation: highlight 2s ease;
}

@keyframes highlight {
    0% { background-color: rgba(25, 135, 84, 0.1); }
    50% { background-color: rgba(25, 135, 84, 0.2); }
    100% { background-color: transparent; }
}

/* Breadcrumb styling */
.breadcrumb {
    background-color: transparent;
    padding: 0;
}

/* Modal customization */
.modal-header {
    background-color: #f8f9fa;
}

/* Content area */
#content {
    min-height: 300px;
}

/* Welcome message */
.welcome-message {
    text-align: center;
    padding: 3rem 1rem;
    background-color: #f8f9fa;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    max-width: 800px;
    margin: 2rem auto;
}

.welcome-message h2 {
    color: #0d6efd;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-message .lead {
    color: #495057;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

/* Make text areas monospaced */
textarea {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 0.9rem;
}

/* Tree context menu */
.jstree-contextmenu {
    font-family: 'Roboto Mono', 'Courier New', monospace;
    font-size: 0.9rem;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Notification styling */
.alert-notification {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    border-left: 4px solid;
}

.alert-success {
    border-left-color: #198754;
}

.alert-danger {
    border-left-color: #dc3545;
}

.alert-warning {
    border-left-color: #ffc107;
}

/* Dropdown arrow styling */
.dropdown-toggle-arrow {
    position: relative;
    width: 24px;
    height: 24px;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #6c757d !important;
    box-shadow: none !important;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-toggle-arrow:hover,
.dropdown-toggle-arrow:focus {
    color: #495057 !important;
    background: transparent !important;
}

.dropdown-toggle-arrow::after {
    display: none !important; /* Remove the default caret */
}

/* Project list down arrow styling */
.fa-chevron-down.fa-xs {
    font-size: 0.65rem;
}

.dropdown-toggle {
    position: relative;
}

/* Sidebar expand button (in content area) */
#sidebar-expand-btn {
    position: fixed;
    top: 70px;
    left: 0;
    width: 15px;
    height: 80px;
    background-color: #000; /* Black background */
    color: rgb(0, 255, 0); /* Bright green text/chevron */
    border: 1px solid rgb(0, 255, 0); /* Bright green outline */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    z-index: 200;
    transition: all 0.2s ease;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-weight: bold;
}

#sidebar-expand-btn:hover {
    width: 18px;
    background-color: #111; /* Slightly lighter black on hover */
    border-color: rgb(0, 220, 0); /* Slightly darker green border on hover */
}

#sidebar-expand-btn .toggle-icon {
    font-size: 1rem;
    transform: rotate(90deg);
}

/* Adjust content when sidebar is collapsed */
.col-md-10.expanded {
    width: 100% !important;
    margin-left: 0 !important;
    flex: 0 0 100% !important; /* Ensure it takes full width */
    max-width: 100% !important;
    padding-left: 20px !important; /* Add some padding on the left side */
}

/* Critique modal styles */
#critique-modal .CodeMirror {
    height: auto !important;
    min-height: 200px;
    visibility: visible !important;
}

#critique-modal .CodeMirror-scroll {
    min-height: 200px;
}

/* Ensure critique content is visible without clicking */
#critique-modal .critique-content {
    min-height: 200px;
    position: relative;
}

/* Make sure CodeMirror visible area has proper size */
#critique-modal .CodeMirror .CodeMirror-sizer {
    min-height: 200px !important;
}

/* Change indicator styling */
.change-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dc3545;
    display: none;
    z-index: 10;
}

/* Microphone button styling */
.microphone-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10;
    background-color: transparent;
    border: none;
    color: #6c757d;
    font-size: 1.2em;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease;
    padding: 0;
}

.microphone-btn:hover {
    color: #0d6efd;
}

.microphone-btn:focus {
    outline: none;
    box-shadow: none;
}

.microphone-btn.recording {
    color: #dc3545;
    animation: pulse 1.5s infinite;
}

/* Audio record button in modals */
.audio-record-btn,
.transcribe-audio-btn {
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1em;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    user-select: none;
}

.audio-record-btn:hover,
.transcribe-audio-btn:hover {
    background-color: #e9ecef;
}

.audio-record-btn.processing,
.transcribe-audio-btn.processing {
    background-color: #cfe2ff;
    color: #0d6efd;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Requirements Chat Plugin Styles */
.chat-messages {
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    background-color: #f8f9fa;
}

.assistant-message {
    background-color: #e9f5ff;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    max-width: 90%;
}

.user-message {
    background-color: #f1f1f1;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    margin-left: auto;
    max-width: 90%;
}

.system-message {
    background-color: #fffbeb;
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid #ffc107;
    max-width: 100%;
}

.thinking-message {
    opacity: 0.7;
    font-style: italic;
}

/* Message content styling */
.message-content {
    font-size: 0.95rem;
    line-height: 1.5;
}

.message-content h1 {
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: #0d6efd;
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 0.25rem;
}

.message-content h2 {
    font-size: 1.3rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    color: #0d6efd;
}

.message-content h3 {
    font-size: 1.1rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

.message-content pre {
    background-color: #f8f9fa;
    padding: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #dee2e6;
    overflow-x: auto;
    margin: 0.5rem 0;
}

.message-content code {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    background-color: #f8f9fa;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid #dee2e6;
}

.message-content pre code {
    border: none;
    padding: 0;
}

.message-content li {
    margin-left: 1.5rem;
    list-style-type: disc;
}

/* Make the chat window taller for more content */
#requirements-chat-modal .chat-messages {
    height: 500px !important;
    max-height: 60vh;
}

/* Dark theme support for chat messages */
body.dark-theme .chat-messages {
    background-color: #272822;
    border-color: #444;
}

body.dark-theme .assistant-message {
    background-color: #2a3744;
}

body.dark-theme .user-message {
    background-color: #3a3a3a;
}

body.dark-theme .system-message {
    background-color: #3a3520;
    border-left-color: #b38600;
}

body.dark-theme .message-content pre,
body.dark-theme .message-content code {
    background-color: #1e1e1e;
    border-color: #444;
}

body.dark-theme .message-content h1,
body.dark-theme .message-content h2,
body.dark-theme .message-content h3 {
    color: #8ab4f8;
    border-color: #444;
}

/* Plugin System Styles */
.plugin-dropdown {
    margin-right: 1rem; /* Increased margin to match spacing between other buttons */
    display: inline-block;
    visibility: visible;
    opacity: 1;
    z-index: 200;
}

.plugin-dropdown .dropdown-menu {
    max-height: 300px;
    overflow-y: auto;
}

.plugin-loading-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    display: none;
}

.crt-loading-container {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #0f0;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    color: #0f0;
    font-family: monospace;
    box-shadow: 0 0 10px #0f0;
    animation: crt-flicker 0.5s infinite alternate;
}

.ascii-robot {
    margin: 0;
    color: #0f0;
    text-shadow: 0 0 5px #0f0;
    font-size: 14px;
    line-height: 1.2;
}

.crt-text {
    margin-top: 10px;
    font-size: 16px;
    letter-spacing: 1px;
    animation: crt-blink 1s infinite;
}

@keyframes crt-flicker {
    0% { opacity: 0.9; }
    100% { opacity: 1; }
}

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

#plugin-response-editor-container {
    height: 60vh;
    overflow: auto;
}

#plugin-response-editor-container .CodeMirror {
    height: 100%;
    font-size: 14px;
}

.plugin-modal .modal-dialog {
    max-width: 80%;
    max-height: 90vh;
}

.plugin-modal .modal-footer button {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.badge.bg-info {
    font-size: 0.7rem;
    font-weight: normal;
    padding: 0.25rem 0.5rem;
}