/* ======================= VARIABLES & BASIC SETUP ======================= */
:root {
    /* Dark theme colors (default) */
    --primary-bg: #1e1e2f; /* Dark blue/purple */
    --secondary-bg: #27293d; /* Slightly lighter dark */
    --third-bg: #565669; /* Darker shade for contrast */
    --panel-bg: #2c2e43;
    --minimized-panel-bg: #222233; /* Darker color for minimized panels */
    --header-footer-bg: #1a1a2a;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0c0;
    --accent-color: #ff7f50; /* Coral - trendy orange */
    --accent-hover: #ff9966; /* Lighter orange for hover */
    --border-color: #404060;
    --editor-bg: #ffffff;
    --editor-text: #111111;
    --resizer-color: var(--border-color);
    --resizer-hover-color: var(--accent-color);
    --status-connected: #33cc33;
    --status-disconnected: #cc3333;
    --minimized-header-bg: #cc6600; /* Dark Orange */

    --header-height: 50px;
    --footer-height: 30px;
}

/* Light theme colors */
:root.light-theme {
    /* Panel backgrounds */
    --primary-bg: #f5f5f7; /* Light gray with blue tint for most panels */
    --secondary-bg: #e8e8ec; /* Slightly darker light gray */
    --third-bg: #d0d0d5; /* Medium light gray for contrast */
    --panel-bg: #f0f0f4; /* Light panel background */
    
    /* Text colors for panels */
    --text-primary: #333344; /* Dark text for light background */
    --text-secondary: #a0a0c0; /* Medium dark text for secondary elements */
    --border-color: #cacad9; /* Light borders */
    
    /* Keep dark header and footer */
    --header-footer-bg: #1a1a2a; /* Keep header dark */
    
    /* Center panel specific (dark background with white paper) */
    --center-panel-bg: #2c2e43; /* Keep center panel background dark */
    --editor-bg: #ffffff; /* Keep paper white */
    --editor-text: #111111; /* Keep text dark on white paper */
    
    /* Keep minimized panels dark for consistent look */
    --minimized-panel-bg: #222233; /* Keep minimized panels dark */
    --minimized-header-bg: #cc6600; /* Keep consistent with dark theme */
    
    /* Let accent colors remain the same for brand consistency */
    --resizer-color: #a2a2c0;
    --resizer-hover-color: var(--accent-color);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--primary-bg);
    color: var(--text-primary);
    overflow: hidden; /* Prevent body scrolling */
    height: 100vh;
    display: flex;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.otoketik-app {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* ======================= HEADER ======================= */
.app-header {
    height: var(--header-height);
    background-color: var(--header-footer-bg);
    display: flex;
    align-items: center;
    padding: 0 15px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevent header from shrinking */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.header-left {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.logo {
    height: 30px;
    margin-right: 10px;
    border-radius: 4px;
}

.app-title {
    display: none;
    font-size: 1.2em;
    font-weight: bold;
    color: var(--text-primary);
}

.header-center {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.header-right {
    position: relative; /* Needed for absolute positioning of dropdown */
    display: flex; /* Add flexbox to properly align buttons */
    align-items: center; /* Center items vertically */
    gap: 10px; /* Add space between buttons */
}

/* Dropdown Menu Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.menu-toggle-btn {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1em; /* Adjust icon size */
    transition: background-color 0.2s, color 0.2s;
}
.menu-toggle-btn:hover {
    background-color: var(--accent-color);
    color: var(--text-primary);
    border-color: var(--accent-hover);
}


.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 110%;
    background-color: var(--primary-bg); /* Stronger contrast */
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
    z-index: 100;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.dropdown-content.active {
    display: block; /* Show when active */
}

.dropdown-content .dropdown-item {
    color: var(--text-primary); /* More contrast */
    background: none;
    padding: 12px 18px;
    font-weight: 500;
    font-size: 1em;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
.dropdown-content .dropdown-item i {
     margin-right: 10px; /* Space between icon and text */
     width: 1.2em; /* Align icons */
}


.dropdown-content .dropdown-item:hover {
    background-color: var(--accent-color);
    color: #fff;
}
 .dropdown-content .dropdown-item:disabled {
     color: #666; /* Dim disabled items */
     cursor: not-allowed;
     background-color: transparent;
 }


.dropdown-divider {
    height: 1px;
    margin: 5px 0;
    overflow: hidden;
    background-color: var(--border-color);
}

.document-title-container {
    margin-left: 20px; /* Adjust spacing */
    display: flex; /* Use flexbox to align input and button */
    align-items: center; /* Vertically center items */
}

#document-title-input {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 1em;
    width: 300px;  /* Optional fixed width */
}
#document-title-input:focus {
    outline: none;
    border-color: var(--accent-color);
}

/* Style for icon-only buttons like settings */
.btn-icon {
    padding: 6px 8px; /* Adjust padding for icon */
    line-height: 1; /* Ensure icon is centered vertically */
    font-size: 0.9em; /* Adjust icon size if needed */
}
#btn-doc-settings {
    /* Inherits .btn-secondary, add specific overrides if needed */
    border-color: var(--border-color); /* Match input border */
    border-radius: 4px; /* Match input border radius */
    padding: 6px 8px; /* Match padding with other buttons */
    margin-left: 5px; /* Add some spacing from the input field */
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 4px; /* Match border-radius with other elements */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#btn-doc-settings:hover {
    background-color: var(--accent-color);
    color: var(--text-primary);
    border-color: var(--accent-hover);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    padding: 0;
    margin-right: 0px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s, color 0.2s, transform 0.3s;
}

.theme-toggle-btn:hover {
    background-color: var(--accent-color);
    color: var(--text-primary);
}

.theme-toggle-btn i {
    font-size: 1.1em;
}

/* Animation for theme toggle */
.theme-toggle-btn.animate {
    animation: spin 0.5s ease-in-out;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ======================= MAIN CONTENT AREA ======================= */
.main-container {
    display: flex;
    flex-grow: 1; /* Take remaining vertical space */
    overflow: hidden; /* Prevent content overflow */
    background-color: var(--secondary-bg); /* Background between panels */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.panel {
    height: 100%;
    background-color: var(--panel-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Panel itself should not scroll, content inside does */
    color: var(--text-secondary);
    flex-grow: 0; /* Don't grow by default */
    flex-shrink: 0; /* Don't shrink by default */
    /* The transition already exists below, ensure it includes flex-basis */
    transition: flex-basis 0.5s ease, min-width 0.5s ease, max-width 0.5s ease, background-color 0.5s ease, background-color 0.3s, color 0.3s, border-color 0.3s;
}

.panel-header {
    padding: 10px 15px;
    font-weight: bold;
    background-color: var(--secondary-bg);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.panel-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s, color 0.2s;
}

.panel-toggle-btn:hover {
    background-color: var(--accent-color);
    color: var(--text-primary);
}

.panel-content {
    padding: 15px;
    overflow-y: auto; /* Enable vertical scrolling for panel content */
    flex-grow: 1;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.panel-content h3 {
    color: var(--text-primary);
    margin-bottom: 10px;
    font-size: 1em;
}
.panel-content h3 i {
    margin-right: 8px;
    color: var(--accent-color);
}

.panel-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 15px 0;
}

/* Specific Panel Styles */
.left-panel {
    flex-basis: 25%; /* Default width */
}
.left-panel .panel-content.left-panel-content {
    padding: 0; /* Remove base padding, sections will handle their own */
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it tries to fill vertical space */
    overflow: hidden; /* Prevent this container from scrolling */
}
.panel-section {
    display: flex;
    flex-direction: column;
    /* Default flex basis - adjust as needed or let content decide initially */
    /* flex-basis: 33%; */
    flex-shrink: 0; /* Prevent shrinking initially, resizing handles it */
    overflow: hidden; /* Contain content */
    border-bottom: 1px solid var(--border-color); /* Separator */
    /* height: 33%; */
    flex-basis: 33%;
    
}
.panel-section:last-child {
    border-bottom: none;
}

#document-outline ul {
    list-style: none;
    padding-left: 15px;
}
#document-outline li {
    margin-bottom: 5px;
    cursor: pointer;
    font-size: 0.9em;
    position: relative; /* Allow positioning summary icon/text */
    padding-left: 15px; /* Add space for potential icon */    
}
#document-outline li:hover {
    color: var(--accent-hover);
}
#document-outline .h1 { font-weight: bold; }
#document-outline .h2 { padding-left: calc(1em + 15px); }
#document-outline .h3 { padding-left: calc(2em + 15px); }
/* Add more levels if needed */

.panel-section-header {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background-color: var(--secondary-bg); /* Slightly different bg */
    border-bottom: 1px solid var(--border-color);
    cursor: pointer; /* Indicate collapsible */
    flex-shrink: 0; /* Prevent header shrinking */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.panel-section-header:hover {
    background-color: var(--third-bg);
}

.panel-section-header .collapse-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px 2px 2px;
    margin-right: 5px;
    font-size: 0.9em;
    line-height: 1;
}
.panel-section-header .collapse-btn:hover {
    color: var(--text-primary);
}

.panel-section-header .section-title {
    font-size: 0.95em;
    font-weight: bold;
    color: var(--text-primary);
    margin: 0;
    flex-grow: 1; /* Push actions to the right */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-section-header .header-actions {
    display: flex;
    gap: 5px;
}
.panel-section-header .header-actions button {
    background: none;
    border: 1px solid transparent; /* For alignment */
    color: var(--text-secondary);
    padding: 2px 5px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.9em;
    line-height: 1;
}
.panel-section-header .header-actions button:hover {
    background-color: var(--panel-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.panel-section-header .header-actions button:disabled {
    color: #666;
    cursor: not-allowed;
    background: none;
    border-color: transparent;
}


/* Section Content Area */
.panel-section-content {
    padding: 10px 15px;
    overflow-y: auto; /* Allow scrolling within content area */
    flex-grow: 1; /* Allow content to take available space */
    min-height: 50px; /* Ensure some minimum space */
    /* Smooth collapse/expand transition */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out, opacity 0.2s ease-out;
    max-height: 5000px; /* Allow large height for transition */
    opacity: 1;
}

/* Collapsed State */
.panel-section-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    border-top: none; /* Hide border when collapsed */
    opacity: 0;
    min-height: 0 !important;
}

/* Vertical Resizer */
.vertical-resizer {
    height: 2px;
    background-color: var(--resizer-color);
    cursor: row-resize;
    flex-shrink: 0; /* Prevent resizer shrinking */
    transition: background-color 0.2s;
}
.vertical-resizer:hover,
.vertical-resizer.dragging {
    background-color: var(--resizer-hover-color);
}

/* Annotation List Specific Styles */
#annotation-list-container {
    /* Add specific styles if needed */
}
.annotation-list-ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.annotation-item {
    padding: 6px 4px;
    border-bottom: 1px solid var(--third-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9em;
    transition: background-color 0.2s;
}
.annotation-item:last-child {
    border-bottom: none;
}
.annotation-item:hover {
    background-color: var(--secondary-bg);
}
.annotation-item .anno-type-icon {
    color: var(--accent-color);
    width: 1.2em; /* Align icons */
    text-align: center;
    flex-shrink: 0;
}
.annotation-item .anno-preview {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-secondary);
}
.annotation-item .anno-line-ref {
    font-size: 0.85em;
    color: #888;
    flex-shrink: 0;
}

.annotation-item.selected,
.annotation-item.selected:hover { /* Keep hover consistent */
    background-color: var(--accent-color);
}
.annotation-item.selected .anno-preview,
.annotation-item.selected .anno-type-icon,
.annotation-item.selected .anno-line-ref {
    color: white;
}
.annotation-item.highlighted {
    /* Subtle highlight, distinct from selection */
     background-color: var(--secondary-bg);
     /* border-left: 3px solid var(--accent-hover); */ /* Example */
}
.annotation-item.highlighted .anno-preview {
    color: var(--text-primary); /* Optional: Slightly brighter text */
}

/* Annotation Content Styling (Applied via markText) */
.anno-content {
    /* Base style for all annotated content */
    transition: background-color 0.3s, box-shadow 0.3s;
}
.anno-content.anno-type-highlight {
    background-color: rgba(255, 255, 0, 0.4); /* Yellowish highlight */
    /* Use box-shadow for slight border without affecting layout */
    box-shadow: 0 0 0 1px rgba(200, 200, 0, 0.6) inset;
}
.anno-content.anno-type-comment {
    /* Dotted underline is common for comments */
    border-bottom: 2px solid rgba(0, 0, 255, 0.8); /* Thicker underline */
    background-color: rgba(0, 0, 255, 0.1); /* Slightly stronger background */
}
.anno-content.anno-type-ai_summary {
    background-color: rgba(100, 200, 100, 0.3); /* Stronger background */
    box-shadow: 0 0 0 1px rgba(80, 160, 80, 0.5) inset;
}
.anno-content.anno-type-note,
.anno-content.anno-type-idea {
     background-color: rgba(180, 180, 180, 0.3); /* Faint grey background */
}
.anno-content-active.anno-type-note,
.anno-content-active.anno-type-idea {
     background-color: rgba(180, 180, 180, 0.3);
}


/* Annotation Marker Styling */

/* Raw View: Visible but subtle markers */
.anno-marker-visible {
    /* Style applied to the markers via markText in Raw View */
    display: inline-block; /* Prevent breaking flow */
    color: var(--text-secondary);
    background-color: var(--secondary-bg);
    font-size: 0.7em; /* Make them smaller */
    padding: 0 3px;
    border-radius: 3px;
    opacity: 0.6; /* Make them less prominent */
    cursor: default; /* Indicate non-editable */
    vertical-align: baseline;
    line-height: 1;
    /* Optional: Prevent selection */
    user-select: none; -moz-user-select: none; -webkit-user-select: none;
}

/* Clean View: Marker placeholder (if using replacedWith) - often empty */
.anno-marker-hidden-widget {
    display: inline-block;
    width: 1px; /* Almost invisible */
    height: 1em; /* Match line height */
    vertical-align: baseline;
    opacity: 0; /* Hide it */
}

/* Annotation Content Display Area */
#annotation-content-display {
    font-size: 0.9em;
    line-height: 1.5;
}
#annotation-content-display .anno-content-details {
    padding: 10px;
    background-color: var(--secondary-bg);
    border-radius: 4px;
}
#annotation-content-display .anno-content-details hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 10px 0;
}
#annotation-content-display .anno-content-details button {
    /* Style Edit/Delete buttons if added */
    margin-top: 10px;
    margin-right: 5px;
    /* Use existing button styles or create new */
}
#annotation-content-display .anno-content-actions {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
}
#annotation-content-display .anno-content-actions button {
     /* Use existing button styles or define new ones */
     padding: 4px 10px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 0.85em;
     background-color: var(--secondary-bg);
     border: 1px solid var(--border-color);
     color: var(--text-secondary);
     transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
#annotation-content-display .anno-content-actions button:hover {
    background-color: var(--panel-bg);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}
#annotation-content-display .anno-content-actions button.btn-delete-annotation:hover {
     background-color: #a03030; /* Reddish hover for delete */
     color: white;
     border-color: #a03030;
}

.empty-list-message {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: 15px;
    font-size: 0.9em;
}


/* Style for Summary within Outline Item */
.outline-summary-icon {
    position: absolute;
    left: 0;
    top: 4px; /* Adjust vertical alignment */
    font-size: 0.8em;
    color: var(--accent-color);
    cursor: help; /* Indicate hover info */
}

.outline-summary-text {
    display: block; /* Show on new line */
    font-size: 0.85em;
    color: var(--text-secondary);
    padding-left: 5px; /* Indent slightly */
    margin-top: 3px;
    border-left: 2px solid var(--border-color); /* Visual separator */
    max-height: 3.5em; /* Limit visible height */
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer; /* Allow clicking to expand? */
}
/* Add hover state to show full summary? */
.outline-summary-text:hover {
    max-height: none; /* Show full text on hover */
    background-color: var(--secondary-bg); /* Optional background */
}

#content-ideas ul {
    list-style: none;
    padding-left: 5px;
}
#content-ideas li {
    margin-bottom: 5px;
    font-size: 0.9em;
}
#content-ideas li i {
    margin-right: 5px;
    font-size: 0.8em;
}


.center-panel {
    flex-basis: 50%; /* Default width */
    flex-grow: 1;   /* Allow growing horizontally */
    flex-shrink: 1; /* Allow shrinking horizontally */
    background-color: var(--secondary-bg); /* Background around the "paper" */
    padding: 20px; /* Keep space around the paper container */
    display: flex; /* Use flexbox for vertical layout */
    flex-direction: column; /* Stack toolbar and editor vertically */
    overflow: hidden; /* <<<< ADD THIS (or ensure it's there) - PREVENTS THIS PANEL FROM SCROLLING */
    /* Add transition for flex-basis if not already covered by .panel */
    transition: flex-basis 0.5s ease; /* Ensure this panel also animates */
}

.center-panel .formatting-toolbar { /* Make selector more specific */
    background-color: var(--third-bg); /* Match panel bg */
    padding: 5px 10px; /* Adjust padding */
    margin-bottom: 10px; /* Space below toolbar */
    border-radius: 4px;
    border: 1px solid var(--border-color);
    text-align: center; /* Or left */
    flex-shrink: 0; /* Prevent shrinking */
    /* position: sticky; */
    /* top: 0; Stick to the top of the viewport */
    z-index: 10; /* Ensure it stays above other panels */   
    /* width: 100%;  */
    /* margin-left: auto;   */
    /* margin-right: auto;  */
    box-sizing: border-box; /* << Optional: Needed if you add padding/border and set width */
    display: flex; /* Use flexbox for better alignment */
    align-items: center; /* Vertically align items */
    justify-content: center; /* Center items horizontally */
    gap: 5px; /* Add some space between items/groups */    
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.center-panel .formatting-toolbar button {
    background: none;
    border: none;
    color: var(--text-secondary);
    padding: 4px 6px; /* Make buttons slightly smaller */
    margin: 0 1px;    /* Adjust margin */
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.9em; /* Make icons smaller */
    transition: background-color 0.2s, color 0.2s;
    vertical-align: middle; /* Align icons better */
    line-height: 1; /* Prevent extra height */
}

.center-panel .formatting-toolbar button:hover {
    background-color: var(--panel-bg); /* Use panel bg for hover */
    color: var(--text-primary);
}

.center-panel .formatting-toolbar button#btn-toggle-wrap.active {
    background-color: var(--accent-color); /* Highlight when active */
    color: white;
}
.center-panel .formatting-toolbar button#btn-toggle-wrap.active:hover {
     background-color: var(--accent-hover);
}

/* Formatting Toolbar Button Active State (General) */
.center-panel .formatting-toolbar button.active {
    background-color: var(--accent-color);
    color: white;
}
.center-panel .formatting-toolbar button.active:hover {
     background-color: var(--accent-hover);
}

.toolbar-zoom-controls {
    display: inline-flex; /* Use flex for internal alignment */
    align-items: center; /* Vertically center items */
    gap: 4px; /* Space between zoom elements */
    background-color: var(--secondary-bg); /* Optional: slightly different background */
    padding: 2px 5px; /* Add some padding */
    border-radius: 4px;
}

/* Adjust zoom buttons specifically for the toolbar */
.toolbar-zoom-controls button {
    /* Inherits general button styles, override if needed */
    padding: 2px 4px; /* Make slightly smaller */
    font-size: 0.85em;
    margin: 0; /* Remove extra margin */
    color: var(--text-secondary); /* Ensure color */
    background: none; /* Ensure background */
    border: none; /* Ensure border */
}
.toolbar-zoom-controls button:hover {
     color: var(--text-primary);
     background-color: var(--panel-bg); /* Consistent hover */
}

/* Style the zoom level display in the toolbar */
.toolbar-zoom-controls #zoom-level-display {
    font-variant-numeric: tabular-nums;
    min-width: 35px; /* Ensure space */
    text-align: center;
    color: var(--text-primary);
    font-size: 0.85em; /* Match button size */
    padding: 0 3px; /* Add slight horizontal padding */
    line-height: 1; /* Prevent extra height */
}


.center-panel .editor-container {
    background-color: var(--editor-bg);
    color: var(--editor-text);
    /* width: var(--paper-width); */ /* Keep desired paper width */
    width: 100%;
    /* min-height: 11in; */ /* <<<< REMOVE THIS */
    /* height: auto; */      /* <<<< REMOVE THIS */
    margin: 10px auto 0 auto; /* Center the paper horizontally, add top margin */
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    border-radius: 2px;

    /* --- Core Changes --- */
    flex-grow: 1;         /* <<<< ADD THIS - Takes remaining vertical space */
    overflow: auto;       /* <<<< ADD THIS - Enables scrolling on THIS container */
    position: relative;   /* <<<< ADD THIS - Good practice for overflow + children */
    /* --- End Core Changes --- */

    margin-bottom: 20px;

    /* Padding INSIDE the container if you want space around CodeMirror */
    /* padding: 10px; */ /* Example - Add internal padding if needed */
    box-sizing: border-box; /* Add if you add padding */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* CodeMirror Styling */
.CodeMirror {
    height: 100% !important; /* Make CM fill its container */
    /* font-family: 'Courier New', Courier, monospace; */
    /* font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; */
    font-family: 'Roboto Mono', 'Source Code Pro', 'Fira Code', monospace;
    font-size: 14px;
    line-height: 1.5;
    /* Remove border here if the container provides enough visual separation */
    /* border: 1px solid #ddd; */
    border-radius: 2px;
    /* Add internal padding WITHIN CodeMirror if desired */
    /* padding: 5px 10px; */
    box-sizing: border-box; /* Needed if padding is added */

    /* Add transition for font-size for smoother zoom */
    transition: font-size 0.1s ease-out; /* Optional: Smooth font transition */    
}

/* Style line numbers */
.CodeMirror-linenumber {
    color: #999;
    padding: 0 5px 0 15px !important; /* Adjust padding */
}
.CodeMirror-gutters {
    background-color: #f7f7f7 !important; /* Gutter background */
    border-right: 1px solid #ddd !important;
}

/* ======================= CLEAN VIEW STYLES ======================= */

/* Hide Markdown Formatting Characters in Clean View */
.CodeMirror.cm-clean-view .cm-formatting,
.CodeMirror.cm-clean-view .cm-formatting-header,
.CodeMirror.cm-clean-view .cm-formatting-strong,
.CodeMirror.cm-clean-view .cm-formatting-em,
.CodeMirror.cm-clean-view .cm-formatting-strikethrough,
.CodeMirror.cm-clean-view .cm-formatting-link,
.CodeMirror.cm-clean-view .cm-formatting-link-string,
.CodeMirror.cm-clean-view .cm-formatting-list,
.CodeMirror.cm-clean-view .cm-formatting-quote,
.CodeMirror.cm-clean-view .cm-formatting-code-block.cm-comment.cm-meta,
.CodeMirror.cm-clean-view .cm-formatting-task, /* Add support for task lists */
.CodeMirror.cm-clean-view .cm-formatting-table, /* Add support for tables */
.CodeMirror.cm-clean-view .cm-formatting-code,
.CodeMirror.cm-clean-view .cm-hmd-frontmatter, /* Front matter */
.CodeMirror.cm-clean-view .cm-comment:not(.cm-formatting-code-block), /* HTML comments */
.CodeMirror.cm-clean-view .cm-formatting-list-ul, /* List bullets */
.CodeMirror.cm-clean-view .cm-formatting-list-ol /* List numbers */ {
    /* More aggressive hiding to prevent layout shifts and ensure zero space */
    display: none !important; /* Override potential defaults */
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    vertical-align: baseline !important; /* Prevent vertical shifts */
}

/* Hide URL part of Markdown links in Clean View */
.CodeMirror.cm-clean-view .cm-link + .cm-url,
.CodeMirror.cm-clean-view .cm-url,
.CodeMirror.cm-clean-view .cm-string.cm-url {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    vertical-align: baseline !important;
}

/* --- Blockquote Styling --- */
.CodeMirror.cm-clean-view .cm-quote {
    font-style: italic;
    color: #6a737d; /* Default light theme quote text color */
    border-left: 4px solid #dfe2e5; /* Default light theme border */
    padding-left: 1em; /* Indentation */
    margin-left: 0; /* Reset default margin if any */
    margin-top: 0.5em; /* Space above */
    margin-bottom: 0.5em; /* Space below */
    display: block; /* Ensure it takes block layout */
}

/* --- Code Block Styling --- */
/* Target the line itself when it contains code block content */
.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background-color: #f6f8fa; /* Default light theme background */
    color: #24292e; /* Default light theme text */
    padding: 10px 15px; /* Padding inside the block */
    margin: 0.5em 0; /* Space above/below */
    border-radius: 6px;
    border: 1px solid #eaecef; /* Default light theme border */
    overflow-x: auto; /* Allow horizontal scrolling for long lines */
    line-height: 1.45;
    font-size: 0.85em; /* Slightly smaller font size */
    /* Remove default line padding if needed */
    padding-left: 15px !important; /* Override default line padding if necessary */
}

/* Hide the formatting markers for code blocks specifically */
.CodeMirror.cm-clean-view .cm-formatting-code-block {
    display: none !important;
}

/* Ensure code content within the block uses the block's styles */
.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block span {
    font-family: inherit !important; /* Inherit monospace font */
    background-color: transparent !important; /* Override inline code background */
    color: inherit !important; /* Inherit text color */
    padding: 0 !important; /* Remove inline padding */
    border: none !important; /* Remove inline border */
    font-size: inherit !important; /* Inherit font size */
}

/* Enhanced Blockquote Styling */
.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-quote {
    border-left: 4px solid #6a89cc; /* Vibrant but subtle blue */
    background-color: rgba(106, 137, 204, 0.07); /* Very light blue background */
    padding: 12px 16px 12px 20px; /* More padding, especially on the left */
    margin: 1em 0 1em 0.5em; /* More vertical spacing */
    color: inherit; /* Use text color from theme */
    font-style: italic;
    border-radius: 0 6px 6px 0; /* Rounded on the right side */
    position: relative; /* For the quote mark */
}

/* Add a subtle quote mark */
.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-quote::before {
    content: '"';
    font-size: 1.8em;
    position: absolute;
    left: 7px;
    top: 0;
    color: rgba(106, 137, 204, 0.5); /* Semi-transparent blue */
    font-family: Georgia, serif;
    font-style: normal;
    opacity: 0.7;
}



/* --- Code Block Styling - Dark Theme Always --- */
.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background-color: #1e1e2e; /* Dark background regardless of theme */
    color: #e0e0e0; /* Light text for contrast */
    padding: 12px 15px; /* Slightly more padding */
    margin: 0.75em 0; /* Increased margin for better separation */
    border-radius: 6px;
    border: 1px solid #333344; /* Subtle border */
    overflow-x: auto; /* Allow horizontal scrolling for long lines */
    line-height: 1.45;
    font-size: 0.9em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
}

/* Syntax highlighting for code blocks */
.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block .cm-keyword {
    color: #ff79c6; /* Pink for keywords */
}

.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block .cm-def,
.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block .cm-variable-2 {
    color: #8be9fd; /* Cyan for definitions and special variables */
}

.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block .cm-string {
    color: #f1fa8c; /* Yellow-green for strings */
}

.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block .cm-number {
    color: #bd93f9; /* Purple for numbers */
}

.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block .cm-comment {
    color: #6272a4; /* Blue-gray for comments */
    font-style: italic;
}

.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block .cm-operator {
    color: #ff79c6; /* Pink for operators */
}

.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block .cm-variable {
    color: #f8f8f2; /* Light gray for variables */
}

/* --- Code Block Styling - Dark Theme Always --- */
.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    background-color: #1e1e2e; /* Dark background regardless of theme */
    color: #e0e0e0; /* Light text for contrast */
    padding: 12px 15px; /* Slightly more padding */
    margin: 0.75em 0; /* Increased margin for better separation */
    border-radius: 6px;
    border: 1px solid #333344; /* Subtle border */
    overflow-x: auto; /* Allow horizontal scrolling for long lines */
    line-height: 1.45;
    font-size: 0.9em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
}

/* Enhanced Blockquote Styling */
.CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-quote {
    border-left: 4px solid #6a89cc; /* Vibrant but subtle blue */
    background-color: rgba(106, 137, 204, 0.07); /* Very light blue background */
    padding: 12px 16px 12px 20px; /* More padding, especially on the left */
    margin: 1em 0 1em 0.5em; /* More vertical spacing */
    color: inherit; /* Use text color from theme */
    font-style: italic;
    border-radius: 0 6px 6px 0; /* Rounded on the right side */
    position: relative; /* For the quote mark */
}

/* --- Light theme adjustments for clean view --- */
:root.light-theme .CodeMirror.cm-clean-view .cm-quote {
    color: #586069;
    border-left-color: #dfe2e5;
}
/* :root.light-theme .CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block {
    background-color: #f6f8fa;
    color: #24292e;
    border-color: #eaecef;
} */

:root:not(.light-theme) .CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-quote::before {
    color: rgba(125, 147, 200, 0.6); /* Slightly brighter in dark theme */
}

/* Dark theme adjustments for blockquotes */
/* :root:not(.light-theme) .CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-quote {
    border-left-color: #7d93c8;
    background-color: rgba(125, 147, 200, 0.1);
} */

/* --- Dark theme adjustments for clean view --- */
:root:not(.light-theme) .CodeMirror.cm-clean-view .cm-quote {
    color: #a0a0c0; /* Adjusted for dark theme text */
    border-left-color: #505070; /* Adjusted for dark theme border */
}
:root:not(.light-theme) .CodeMirror.cm-clean-view pre.CodeMirror-line.cm-line-code-block {
    background-color: #222436; /* Darker background */
    color: #c0c0e0; /* Lighter text */
    border-color: #404060; /* Darker border */
}

/* Headings */
.CodeMirror.cm-clean-view .cm-header {
    font-weight: bold;
    line-height: 1.3;
    color: #000;
    padding-top: 0.5em; /* Add space above headers */
    padding-bottom: 0.3em; /* Add space below headers */
    display: inline-block; /* Allow headers to have proper padding */
}
.CodeMirror.cm-clean-view .cm-header-1 { font-size: 1.8em; color: #333; border-bottom: 1px solid #eee; }
.CodeMirror.cm-clean-view .cm-header-2 { font-size: 1.5em; color: #333; border-bottom: 1px solid #f0f0f0; }
.CodeMirror.cm-clean-view .cm-header-3 { font-size: 1.3em; color: #444; }
.CodeMirror.cm-clean-view .cm-header-4 { font-size: 1.1em; color: #555; }
.CodeMirror.cm-clean-view .cm-header-5 { font-size: 1.0em; color: #666; }
.CodeMirror.cm-clean-view .cm-header-6 { font-size: 0.9em; color: #777; }

/* Inline Styles */
.CodeMirror.cm-clean-view .cm-strong { font-weight: bold; }
.CodeMirror.cm-clean-view .cm-em { font-style: italic; }
.CodeMirror.cm-clean-view .cm-strikethrough { text-decoration: line-through; }
.CodeMirror.cm-clean-view .cm-link {
    color: #4a90e2; 
    text-decoration: underline;
    cursor: pointer;
}

/* Improve code styling */
.CodeMirror.cm-clean-view .cm-comment {
    font-family: 'Courier New', Courier, monospace;
    background-color: rgba(200, 200, 200, 0.3);
    padding: 0.1em 0.3em;
    border-radius: 3px;
    font-size: 0.9em;
    color: #c7254e;
}

/* Improve blockquote styling */
.CodeMirror.cm-clean-view .cm-quote {
    font-style: italic;
    color: #666;
    border-left: 4px solid #ccc;
    padding-left: 10px;
    margin-left: 5px;
}

/* Code Blocks */
.CodeMirror.cm-clean-view pre.CodeMirror-line span.cm-comment {
    font-family: 'Courier New', Courier, monospace;
    background-color: #f5f5f5;
    color: #333;
    display: block;
    border-radius: 4px;
    margin: 5px 0;
    white-space: pre-wrap;
    font-size: 0.9em;
    line-height: 1.4;
    padding: 10px;
    border: 1px solid #eee;
}

/* Lists */
.CodeMirror.cm-clean-view .cm-variable-2 {
    content: '•'; /* Add bullet */
    padding-left: 1.2em; /* Indent bullet lists */
    position: relative; /* For bullet positioning */
}
.CodeMirror.cm-clean-view .cm-variable-2:before {
    content: '•'; /* Add bullet */
    position: absolute;
    left: 0.5em;
}
.CodeMirror.cm-clean-view .cm-variable-3 {
    padding-left: 1.5em; /* Indent numbered lists */
    position: relative;
}
.CodeMirror.cm-clean-view .cm-variable-3:before {
    content: '1.'; /* Simulate numbered list */
    position: absolute;
    left: 0.2em;
    font-size: 0.9em;
    opacity: 0.7;
}

/* Horizontal Rule */
.CodeMirror.cm-clean-view .cm-hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
    text-indent: -9999px; /* Hide the actual '---' text */
}

/* Ensure Annotation Markers are Hidden in Clean View */
.CodeMirror.cm-clean-view .anno-marker-visible {
    display: none !important;
}

/* Ensure Annotation Content styles still apply correctly */
.CodeMirror.cm-clean-view .anno-content {
    /* Base styles should still apply */
}
.CodeMirror.cm-clean-view .anno-content.anno-type-highlight {
    /* Highlight styles should still apply */
}

.CodeMirror.cm-clean-view .cm-header-1::before {
    content: "#";
    display: none !important;
}

.CodeMirror.cm-clean-view .cm-header-2::before {
    content: "##";
    display: none !important;
}

.CodeMirror.cm-clean-view .cm-header-3::before {
    content: "###";
    display: none !important;
}

.CodeMirror.cm-clean-view .cm-header-1 {
    text-indent: -1em; /* Move the real content to hide the # */
    padding-left: 1em; /* Add space to compensate for the indent */
}

.CodeMirror.cm-clean-view .cm-header-2 {
    text-indent: -2em; /* Move the real content to hide the ## */
    padding-left: 2em; /* Add space to compensate for the indent */
}

.CodeMirror.cm-clean-view .cm-header-3 {
    text-indent: -3em; /* Move the real content to hide the ### */
    padding-left: 3em; /* Add space to compensate for the indent */
}

/* Handle bold markers - more complex because they could be anywhere */
.CodeMirror.cm-clean-view .cm-strong {
    /* Special handling to avoid showing ** while keeping the bold effect */
    position: relative;
    padding: 0 2px; /* Add a bit of padding to compensate */
}

/* Similar approach for other formatting markers */
/* Italic */
.CodeMirror.cm-clean-view .cm-em {
    position: relative;
    padding: 0 1px;
}


/* NEW: Direct heading styling for clean view */
.CodeMirror .clean-heading-1 {
    font-size: 2em;
    font-weight: bold;
    color: #000;
    padding-top: 0.5em;
    padding-bottom: 0.3em;
}

.CodeMirror .clean-heading-1 .cm-formatting-header {
    display: none !important;
}

.CodeMirror .clean-heading-2 {
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
    padding-top: 0.4em;
    padding-bottom: 0.2em;
}

.CodeMirror .clean-heading-2 .cm-formatting-header {
    display: none !important;
}

.CodeMirror .clean-heading-3 {
    font-size: 1.3em;
    font-weight: bold;
    color: #444;
    padding-top: 0.3em;
}

.CodeMirror .clean-heading-3 .cm-formatting-header {
    display: none !important;
}

/* Debug aids - add these for temporary testing */
.CodeMirror.cm-clean-view {
    position: relative;
}

.CodeMirror.cm-clean-view::after {
    content: "CLEAN VIEW ACTIVE";
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(255,255,0,0.3);
    padding: 3px 8px;
    font-size: 10px;
    opacity: 0.5;
}

.clean-view-bold {
    font-weight: bold;
}

.clean-view-italic {
    font-style: italic;
}

.clean-heading-1 {
    font-size: 2em;
    font-weight: bold;
    line-height: 1.3;
    color: #333;
    padding-top: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #eee;
}

.clean-heading-2 {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.3;
    color: #333;
    padding-top: 0.4em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #f0f0f0;
}

.clean-heading-3 {
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.3;
    color: #444;
    padding-top: 0.3em;
}

.clean-heading-4 {
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.3;
    color: #555;
}


/* Light theme adjustments for clean view */
:root.light-theme .CodeMirror.cm-clean-view .cm-header { color: #333; }
:root.light-theme .CodeMirror.cm-clean-view .cm-header-1 { border-bottom-color: #ddd; }
:root.light-theme .CodeMirror.cm-clean-view .cm-header-2 { border-bottom-color: #eee; }
:root.light-theme .CodeMirror.cm-clean-view .cm-quote { border-left-color: #ddd; }

/* Dark theme adjustments for clean view */
:root:not(.light-theme) .CodeMirror.cm-clean-view .cm-header { color: #eee; }
:root:not(.light-theme) .CodeMirror.cm-clean-view .cm-header-1 { border-bottom-color: #444; }
:root:not(.light-theme) .CodeMirror.cm-clean-view .cm-header-2 { border-bottom-color: #555; }
:root:not(.light-theme) .CodeMirror.cm-clean-view .cm-quote { border-left-color: #555; color: #aaa; }
:root:not(.light-theme) .CodeMirror.cm-clean-view pre.CodeMirror-line span.cm-comment {
    background-color: #2d2d2d;
    color: #ddd;
    border-color: #444;
}

/* ======================= MATH/FORMULA RENDERING STYLES ======================= */

/* LaTeX formula styling */
.CodeMirror .latex-math {
    color: #9370DB; /* Purple for math expressions */
    font-family: 'Latin Modern Math', 'STIX Two Math', 'STIX Math', 'TeX Gyre Termes Math', 'Cambria Math', 'Asana Math', serif;
}

.CodeMirror .latex-inline-delimiter,
.CodeMirror .latex-block-delimiter {
    color: #CC6600; /* Orange for the delimiters */
    font-weight: normal;
}

/* Style when rendered in Clean View mode */
.CodeMirror.cm-clean-view .latex-math {
    background-color: rgba(245, 245, 255, 0.2); /* Very light blue background */
    padding: 0 2px;
    border-radius: 2px;
}

/* Hide formula delimiters in clean view */
.CodeMirror.cm-clean-view .latex-inline-delimiter,
.CodeMirror.cm-clean-view .latex-block-delimiter {
    display: none !important;
}

/* Special styling for rendered formulas */
.katex-rendered {
    background-color: rgba(245, 245, 255, 0.15);
    padding: 3px;
    border-radius: 3px;
    margin: 2px 0;
    display: inline-block;
}

/* Block math alignment */
.katex-block {
    display: block;
    text-align: center;
    margin: 0.5em 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/* For dark theme, adjust formula backgrounds */
:root:not(.light-theme) .CodeMirror.cm-clean-view .latex-math {
    background-color: rgba(70, 70, 100, 0.4);
}

:root:not(.light-theme) .katex-rendered {
    background-color: rgba(70, 70, 100, 0.3);
}

/* ======================= END MATH/FORMULA RENDERING STYLES ======================= */

/* ======================= IMAGE RENDERING STYLES ======================= */

/* Image container in clean view mode */
.CodeMirror.cm-clean-view .image-rendered {
    display: block;
    max-width: 100%;
    margin: 10px 0;
    text-align: center;
}

/* Actual image styling */
.CodeMirror.cm-clean-view .image-rendered img {
    max-width: 100%;
    max-height: 500px; /* Limit height to avoid excessive scrolling */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 4px;
}

/* Image caption styling */
.CodeMirror.cm-clean-view .image-rendered figcaption {
    font-size: 0.9em;
    color: #777;
    margin-top: 5px;
    font-style: italic;
}

/* Style for image placeholders when in raw mode */
.CodeMirror:not(.cm-clean-view) .cm-image-marker {
    color: #4a90e2;
    font-weight: normal;
}

.CodeMirror:not(.cm-clean-view) .cm-image-alt {
    color: #9370DB;
    font-style: italic;
}

.CodeMirror:not(.cm-clean-view) .cm-image-url {
    color: #35a35a;
}

/* Resize handle for images */
.image-resize-handle {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: var(--accent-color);
    cursor: nwse-resize;
    border-radius: 3px 0 0 0;
}

.image-rendered:hover .image-resize-handle {
    display: block;
}

/* Loading spinner for images */
.image-loading {
    display: inline-block;
    width: 100%;
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
}

.image-loading i {
    animation: spin 1s infinite linear;
}

/* Image error state */
.image-error {
    display: inline-block;
    border: 1px solid #ffcccc;
    background-color: #fff5f5;
    color: #ff3333;
    padding: 10px;
    border-radius: 4px;
    margin: 5px 0;
    font-size: 0.9em;
}

/* ======================= END IMAGE RENDERING STYLES ======================= */

/* ======================= Image Modal Styles ======================= */

.image-preview-container {
    margin-top: 15px;
    min-height: 200px;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.image-preview-placeholder {
    color: var(--text-secondary);
    text-align: center;
    padding: 20px;
    font-style: italic;
    max-width: 80%;
}

.image-preview {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
}

.image-upload-note {
    color: var(--text-secondary);
    font-size: 0.85em;
    margin-top: 10px;
    font-style: italic;
}

/* Tab styling enhancements */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.tab-link {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.3s, border-color 0.3s;
}

.tab-link.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.toolbar-divider {
    width: 1px;
    height: 24px;
    background-color: var(--border-color);
    margin: 0 10px;
    display: inline-block;
    vertical-align: middle;
}

/* ======================= End Image Modal Styles ======================= */


/* ======================= END CLEAN VIEW STYLES ======================= */

.right-panel {
    flex-basis: 25%; /* Default width */
}

.right-panel .panel-content.chat-container {
    padding: 0; /* Remove default padding */
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it fills the panel content area */
}

.chat-messages {
    flex-grow: 1; /* Takes up available space */
    overflow-y: auto; /* Scrollable message history */
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between messages */
}

.message {
    display: flex;
    max-width: 85%; /* Limit message width */
}

.message.user {
    align-self: flex-end; /* Align user messages to the right */
}
.message.ai {
    align-self: flex-start; /* Align AI messages to the left */
}

.message-content {
    padding: 10px 15px;
    border-radius: 18px; /* Bubble shape */
    font-size: 0.95em;
    line-height: 1.5;
    word-wrap: break-word; /* Wrap long words */
    background-color: var(--secondary-bg); /* Default background */
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.message.user .message-content {
    background-color: var(--accent-color); /* User bubble color */
    color: white;
    border-bottom-right-radius: 5px; /* Slightly flatten corner */
}

.message.ai .message-content {
    background-color: var(--panel-bg); /* AI bubble color */
    border-bottom-left-radius: 5px; /* Slightly flatten corner */
}

 /* Optional: Style for AI thinking indicator */
 .message.ai.loading .message-content {
     background-color: transparent;
     box-shadow: none;
     color: var(--text-secondary);
 }
 .message.ai.loading i {
     margin-right: 5px;
 }

 /* Mode Selector Styling */
.chat-mode-selector  {
    width: 80%;
    margin: 0 auto; /* Center the selector */
    display: flex;
    padding: 4px;;
}

.chat-mode-selector select {
    background-color: var(--secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 6px; /* Slightly reduced padding */
    border-radius: 8px;
    font-size: 0.7em;
    height: 34px; /* Slightly reduced height */
    outline: none;
    cursor: pointer;
    width: 100%; /* Take full width */
}
.chat-mode-selector select:focus {
    border-color: var(--accent-color);
}


/* Chat Input Area */
.chat-input-area {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 15px;
    border-top: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    flex-shrink: 0;
    gap: 10px; /* Add space between input and button */
}

#chat-input {
    flex-grow: 1;
    flex-shrink: 1;
    border: none;
    background-color: var(--primary-bg);
    color: var(--text-primary);
    padding: 10px 15px;
    border-radius: 20px;
    resize: none;
    overflow-y: auto;
    max-height: calc(1.5em * 5 + 20px);
    line-height: 1.5;
    font-size: 0.95em;
    font-family: inherit;
    outline: none; /* Remove focus outline */
    border: 1px solid var(--border-color);
    transition: border-color 0.2s;
}

#chat-send-btn {
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 50%; /* Circle button */
    width: 40px;
    height: 40px;
    font-size: 1.1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s;
}
#chat-send-btn:hover {
    background-color: var(--accent-hover);
}
#chat-send-btn:disabled {
    background-color: var(--secondary-bg);
    opacity: 0.6;
    cursor: not-allowed;
}

/* ======================= RESIZERS ======================= */
.resizer {
    flex-basis: 2px; /* Width of the draggable area */
    flex-shrink: 0;
    flex-grow: 0;
    background-color: var(--resizer-color);
    cursor: col-resize;
    transition: background-color 0.2s;
    z-index: 10; /* Ensure it's above panels */
}

.resizer:hover,
.resizer.dragging {
    background-color: var(--resizer-hover-color);
}

/* Disabled resizer style when panel is minimized */
.resizer.disabled {
    background-color: var(--secondary-bg);
    cursor: default;
    pointer-events: none; /* Prevent interaction with disabled resizer */
}

.resizer.disabled:hover {
    background-color: var(--secondary-bg); /* No hover effect for disabled */
}


/* ======================= MINIMIZED PANEL STATE ======================= */
.panel.minimized {
    flex-basis: 40px !important; /* Width when minimized */
    min-width: 40px !important;
    max-width: 40px !important; /* Ensure it doesn't expand */
    background-color: var(--minimized-panel-bg); /* Apply darker background */
    transition: flex-basis 0.5s ease, min-width 0.5s ease, max-width 0.5s ease, background-color 0.5s ease;
}

.panel.minimized .panel-content {
    display: none;
}

.panel.minimized .panel-header {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 15px 10px;
    height: 100%;
    justify-content: flex-start;
    background-color: var(--minimized-header-bg);
}

.panel.minimized .panel-toggle-btn {
    transform: rotate(180deg); /* Flip the icon when minimized */
    margin-top: 10px; /* Add space between title and button */
}

.panel.minimized#left-panel .panel-toggle-btn i {
    transform: rotate(-90deg); /* Adjust icon orientation */
}

.panel.minimized#right-panel .panel-toggle-btn i {
    transform: rotate(90deg); /* Adjust icon orientation */
}

/* Improved animation for smoother transition */
.panel {
    transition: flex-basis 0.5s ease, min-width 0.5s ease, max-width 0.5s ease, background-color 0.5s ease;
}

.panel-header, .panel-toggle-btn, .panel-toggle-btn i, .panel-content {
    transition: all 0.5s ease;
}


/* ======================= FOOTER ======================= */
.app-footer {
    height: var(--footer-height);
    background-color: var(--header-footer-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    font-size: 0.8em;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevent footer from shrinking */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.footer-left span, .footer-right span {
    margin-right: 15px;
}

/* Footer View Controls */
.footer-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Adjust spacing */
}

#connection-status i {
    font-size: 0.8em; /* Smaller dot */
    margin-right: 4px;
}
.status-connected {
    color: var(--status-connected);
}
.status-disconnected {
    color: var(--status-disconnected);
}

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

.modal.active {
    display: flex; /* Use flex to center */
}

.modal-content {
    background-color: var(--secondary-bg);
    margin: auto; /* Centered horizontally/vertically with flex */
    padding: 25px;
    border: 1px solid var(--border-color);
    width: 80%; /* Adjust as needed */
    max-width: 650px; /* Default Max width */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* Limit height */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Specific width for Document Settings Modal */
#document-settings-modal-content {
    max-width: 60vw; /* Use viewport width */
    min-width: 700px; /* Ensure it doesn't get too small */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.4em;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 2em;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 5px;
}
.modal-close-btn:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 0; /* Remove default padding, tabs will handle it */
    max-height: 70vh; /* Limit modal height */
    overflow-y: auto; /* Allow scrolling if content overflows */
    flex-grow: 1; /* Take available space */
    display: flex; /* Use flex for tab layout */
    flex-direction: column; /* Stack tabs and content */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Tab Navigation */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevent shrinking */
    padding: 0 25px; /* Match original modal-body padding */
}

.tab-link {
    padding: 12px 20px;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 3px solid transparent; /* Placeholder for active state */
    color: var(--text-secondary);
    font-size: 1em;
    margin-bottom: -1px; /* Overlap border-bottom */
    transition: color 0.2s, border-color 0.2s;
}

.tab-link:hover {
    color: var(--text-primary);
}

.tab-link.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
    font-weight: bold;
}

/* Tab Content */
.tab-content {
    display: none; /* Hide inactive tabs */
    padding: 20px 25px; /* Restore padding for content */
    flex-grow: 1; /* Allow content to fill space */
    overflow-y: auto; /* Scroll within tab if needed */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.tab-content.active {
    display: block; /* Show active tab */
}

/* Form Group Styling within Modals */
.modal-body .form-group {
    margin-bottom: 20px; /* Increased spacing */
}

/* Label for a group of checkboxes/radios */
.form-group-label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
    color: var(--text-primary);
    font-size: 0.9em;
}

/* Checkbox/Radio Groups */
.form-group-checkbox,
.form-group-checkbox-inline {
    display: flex;
    align-items: center;
    margin-bottom: 10px; /* Spacing between checkbox items */
}

.form-group-checkbox input[type="checkbox"],
.form-group-checkbox-inline input[type="checkbox"] {
    margin-right: 10px;
    width: 16px; /* Adjust size */
    height: 16px;
    cursor: pointer;
}

.form-group-checkbox label,
.form-group-checkbox-inline label {
    margin-bottom: 0; /* Override default label margin */
    font-weight: normal; /* Normal weight for checkbox labels */
    color: var(--text-secondary);
    cursor: pointer;
    flex-grow: 1; /* Allow label to take space in inline */
}

/* Inline specific adjustments */
.form-group-checkbox-inline label {
    margin-right: 10px; /* Space between label and input */
    flex-grow: 0; /* Don't let label grow too much */
}

.form-control-inline {
    width: auto !important; /* Override default width */
    flex-grow: 1; /* Take remaining space */
    max-width: 300px; /* Limit width */
    font-size: 0.9em !important; /* Slightly smaller */
    padding: 6px 10px !important; /* Adjust padding */
}
.form-control-inline:disabled {
    background-color: var(--third-bg);
    cursor: not-allowed;
    opacity: 0.6;
}

.modal-body label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--text-primary);
    font-size: 0.9em;
}

.modal-body .form-control {
    width: 100%;
    padding: 8px 12px;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 4px;
    font-size: 0.95em;
    transition: border-color 0.2s;
}

/* NEW: Tag Input Styles */
.tag-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: text; /* Indicate text input area */
}

.tag-item {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent-color);
    color: white;
    padding: 3px 8px;
    border-radius: 12px; /* Pill shape */
    font-size: 0.85em;
    white-space: nowrap;
}

.tag-remove-btn {
    background: none;
    border: none;
    color: white;
    margin-left: 6px;
    cursor: pointer;
    font-size: 1.1em;
    line-height: 1;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.tag-remove-btn:hover {
    opacity: 1;
}

.tag-input {
    flex-grow: 1;
    border: none;
    background: none;
    color: var(--text-primary);
    padding: 4px 0; /* Minimal padding */
    outline: none;
    min-width: 100px; /* Ensure some minimum space */
    font-size: 0.95em; /* Match form-control */
}
/* END NEW: Tag Input Styles */

.modal-body .form-control:focus {
    outline: none;
    border-color: var(--accent-color);
}

.modal-body textarea.form-control {
    resize: vertical; /* Allow vertical resize */
    min-height: 60px;
}

.modal-body select.form-control {
    cursor: pointer;
}
.modal-body select.form-control option {
    background-color: var(--panel-bg); /* Dropdown option background */
    color: var(--text-primary);
}

/* Assistant Preview */
.assistant-preview {
    display: flex;
    align-items: center;
    background-color: var(--primary-bg); /* Slightly different background */
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 15px;
    margin-top: 10px; /* Space below dropdown */
    margin-bottom: 20px; /* Space before next section */
}

.assistant-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover; /* Ensure image covers the area */
    background-color: var(--secondary-bg); /* Placeholder bg */
    flex-shrink: 0;
}

.assistant-info h5 {
    margin: 0 0 5px 0;
    color: var(--text-primary);
    font-size: 1.1em;
}

.assistant-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9em;
    line-height: 1.4;
}

/* Optional Divider */
.modal-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}

/* Search Bar */
.search-bar-container {
    position: relative;
    margin-bottom: 15px;
}

#load-search-input {
    width: 100%;
    padding: 10px 15px 10px 35px; /* Add padding for icon */
    border-radius: 5px;
    border: 1px solid var(--border-color);
    background-color: var(--primary-bg);
    color: var(--text-primary);
    font-size: 1em;
}
#load-search-input::placeholder {
    color: var(--text-secondary);
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

/* Document List */
.document-list-container {
    min-height: 150px; /* Ensure some space even when empty/loading */
    position: relative; /* For absolute positioning of spinner/messages */
}

.loading-spinner, .empty-list-message, .error-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-secondary);
    font-size: 1.1em;
    text-align: center;
}
.loading-spinner i {
    margin-right: 8px;
    color: var(--accent-color);
}
.error-message {
    color: var(--status-disconnected); /* Use error color */
}

ul.document-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 45vh; /* Limit list height within modal body */
    overflow-y: auto; /* Scroll list specifically */
}

ul.document-list li {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    flex-direction: column; /* Stack title and timestamps */
}
ul.document-list li:last-child {
    border-bottom: none;
}

ul.document-list li:hover {
    background-color: var(--panel-bg);
}

ul.document-list li.selected {
    background-color: var(--accent-color);
    color: white; /* Ensure text is readable on accent bg */
}
ul.document-list li.selected .doc-title {
     color: white;
}
ul.document-list li.selected .doc-timestamps,
ul.document-list li.selected .doc-timestamps .timestamp {
    color: #eee; /* Slightly dimmer white for timestamps */
}

.doc-title {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 5px;
    font-size: 1.1em;
}

.doc-timestamps {
    font-size: 0.85em;
    color: var(--text-secondary);
}
.doc-timestamps .timestamp {
     color: var(--text-secondary); /* Explicitly set */
}

.modal-footer {
    padding: 15px 25px; /* Match content padding */
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}

.modal-footer button {
    padding: 8px 18px;
    margin-left: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s, border-color 0.2s;
}

.modal-footer .btn-secondary {
    background-color: var(--secondary-bg);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}
.modal-footer .btn-secondary:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.modal-footer .btn-primary {
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
    color: white;
}
.modal-footer .btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}
.modal-footer .btn-primary:disabled {
    background-color: var(--secondary-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
    opacity: 0.6;
    cursor: not-allowed;
}

/* ======================= AUTH PAGES (LOGIN & REGISTER) ======================= */
body.auth-bg {
    background: linear-gradient(135deg, #1e1e2f 0%, #2c2e43 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-page-wrapper {
    width: 100%;
    position: relative;
}

.auth-one-bg-position.auth-one-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 380px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTkyMHB4IiBoZWlnaHQ9IjM4MHB4IiB2aWV3Qm94PSIwIDAgMTkyMCAzODAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9IjAuMiI+CiAgICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQ0OTkuMDAwMDAwLCAtMzM2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNNTc1LjQzMywzMzcuOTA5IEM2ODAuNDc2LDMxMy45NzYgNzU0Ljc1OCw0MjEuMDYyIDg0My42NjQsNDQ1LjExNCBDOTMyLjU2OSw0NjkuMTY3IDk5Ni45MDcsNDA4LjIyNSAxMTIwLjkxLDQ2NS44ODQgQzEyNDQuOTEyLDUyMy41NDIgMTI0Ni4xMDUsNTkzLjk2OCAxMzA5LjgzNSw2MTEuMjc0IEMxMzczLjU2NSw2MjguNTggMTQ3OS43NDMsNTYxLjg0NSAxNjIwLjk4NSw1OTcuODc1IEMxNzYyLjIyNyw2MzMuOTA1IDE4OTQuMTg2LDY0Ni40NDIgMTkyMCw2MDcuOTYgTDE5MjAsMzM1IEw1NzUuNDMzLDMzNy45MDkgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjM3My41MDAwMDAsIDQ5MS41MDAwMDApIHNjYWxlKDEsIC0xKSB0cmFuc2xhdGUoLTYzNzMuNTAwMDAwLCAtNDkxLjUwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik02MzQzLjQzMywzMzcuOTA5IEM2NDQ4LjQ3NiwzMTMuOTc2IDY1MjIuNzU4LDQyMS4wNjIgNjYxMS42NjQsNDQ1LjExNCBDNjcwMC41NjksNDY5LjE2NyA2NzY0LjkwNyw0MDguMjI1IDY4ODguOTEsNDY1Ljg4NCBDNzAxMi45MTIsNTIzLjU0MiA3MDE0LjEwNSw1OTMuOTY4IDcwNzcuODM1LDYxMS4yNzQgQzcxNDEuNTY1LDYyOC41OCA3MjQ3Ljc0Myw1NjEuODQ1IDczODguOTg1LDU5Ny44NzUgQzc1MzAuMjI3LDYzMy45MDUgNzY2Mi4xODYsNjQ2LjQ0MiA3Njg4LDYwNy45NiBMNzY4OCwzMzUgTDYzNDMuNDMzLDMzNy45MDkgWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzAxNS41MDAwMDAsIDQ5MS41MDAwMDApIHNjYWxlKDEsIC0xKSB0cmFuc2xhdGUoLTcwMTUuNTAwMDAwLCAtNDkxLjUwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=');
    background-color: rgba(40, 41, 61, 0.2);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

.auth-page-content {
    padding-bottom: 0 !important;
    margin-top: 40px;
}

.centered-container {
    max-width: 450px;
    margin: 0 auto;
}

.card.login {
    background-color: rgba(40, 41, 61, 0.85);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.card.login:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.card-body {
    padding: 2.5rem !important;
}

.text-white, .text-light {
    color: #f8f9fa !important;
}

.form-label {
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-control {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.form-control:focus {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem rgba(255, 127, 80, 0.25);
    color: #fff;
}

.input-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    color: rgba(255, 255, 255, 0.5);
}

.position-relative .form-control {
    padding-left: 2.5rem;
}

.btn-success, .btn-danger, .btn-secondary {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-success {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}
.btn-success:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    transform: translateY(-2px);
}

.btn-danger {
    background-color: #ea4335;
    border-color: #ea4335;
}
.btn-danger:hover {
    background-color: #d33426;
    border-color: #d33426;
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: #4285f4;
    border-color: #4285f4;
    color: white;
}
.btn-secondary:hover {
    background-color: #3367d6;
    border-color: #3367d6;
    transform: translateY(-2px);
}

.btn-link {
    color: var(--accent-color);
    text-decoration: none;
}

.password-addon {
    color: rgba(255, 255, 255, 0.5) !important;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 1rem !important;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #ff6b6b;
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 0.5rem;
    padding: 1rem;
}

.separator-or {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
}
.separator-or h6 {
    display: inline-block;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    background-color: rgba(40, 41, 61, 0.95);
}

.separator-or:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.1);
}

a.text-orange, a.text-orange:visited {
    color: var(--accent-color) !important;
}
a.text-orange:hover {
    color: var(--accent-hover) !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.link-underline-opacity-100-hover:hover {
    text-decoration-color: currentColor !important;
}

.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 2rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }

.bg-light {
    background-color: rgba(255, 255, 255, 0.05) !important;

.fs-12 { font-size: 0.85em; }
.fs-13 { font-size: 0.95em; }

.rounded-4 { border-radius: 16px !important; }

/* Password validator styling */
#password-contain p {
    margin-bottom: 0.5rem;
    position: relative;
    padding-left: 25px;
}

#password-contain p:before {
    content: "×";
    position: absolute;
    left: 0;
    width: 20px;
    height: 20px;
    color: #dc3545;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
}

#password-contain p.valid:before {
    content: "✓";
    color: #198754;
}

/* Add responsive container classes */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-md-8 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.d-flex {
    display: flex !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-center {
    justify-content: center !important;
}

.text-center {
    text-align: center !important;
}

.w-100 {
    width: 100% !important;
}

/* Handle dropdowns and other display utilities */
.d-none {
    display: none !important;
}

.d-sm-block {
    display: block;
}

@media (max-width: 600px) {
    .card.login {
        margin: 0 15px;
    }
    
    .auth-page-content {
        padding: 20px 0;
    }
}

/* Hide scrollbars for a cleaner look */
body.auth-bg::-webkit-scrollbar {
    display: none;
}