/* ========================================
   CSS VARIABLES & BASE STYLES
   ======================================== */

/* Base Body Styling */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
    background-color: #f9f9f9;
    font-size: 14px;
    transition: background-color 0.2s ease-in-out;
}

/* ========================================
   LAYOUT & CONTAINER STYLES
   ======================================== */

/* Full Screen Mode - Body */
body.step-mode {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Full Screen Mode - Notebook Container */
body.step-mode .notebook-container {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
}

/* Movie Mode CSS */
body.movie-mode-active {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.movie-mode-active .notebook-container {
    margin: 0 !important;
    padding: 0 !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
}

/* ========================================
   NAVIGATION & MENU COMPONENTS
   ======================================== */

/* Step Navigation Menu - Discrete Design */
.step-nav-menu {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.step-mode .step-nav-menu {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

/* Navigation menus are controlled by JavaScript, not CSS */

/* Step Navigation Buttons - Discrete */
.step-nav-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.step-nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

.step-nav-btn:active {
    transform: scale(0.95);
}

/* Menu toggle button special styling */
#stepMenuToggleBtn {
    font-size: 16px;
}

/* Exit button special styling - now consistent with other buttons */
/* #stepExitBtn - Removed special red color - now uses default black like other buttons */

/* Down button special styling to make it more distinct */
#stepDownBtn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

#stepDownBtn:hover {
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Top Menu - Basic styling (enhanced version below) */

/* Top Menu Dropdown */
.top-menu-dropdown {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

.top-menu-dropdown-btn {
    background: none;
    border: none;
    color: #343a40;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.top-menu-dropdown-btn:hover {
    background-color: #e9ecef;
}

/* Dropdown Content */
.top-menu-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 4px); /* Add small gap between button and submenu */
    left: 0;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    min-width: 200px;
    max-height: 70vh;
    overflow-y: auto;
}

/* Special styling for Goto dropdown to accommodate 20 characters */
#gotoDropdown .top-menu-dropdown-content {
    min-width: 250px;
}

/* Show dropdown only when active (controlled by JavaScript) */
.top-menu-dropdown.active .top-menu-dropdown-content {
    display: block;
}

/* Dropdown Items */
.top-menu-dropdown-content .top-menu-dropdown-item {
    color: #343a40;
    padding: 8px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s ease;
}

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

.top-menu-dropdown-content .top-menu-dropdown-item:last-child {
    border-bottom: none;
}

/* Dropdown Container */
.dropdown-container {
    position: relative;
    display: inline-block;
}

/* Dropdown Button */
.dropdown-btn {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #495057;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.dropdown-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

/* Dropdown Content */
.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    min-width: 200px;
    max-height: 500px;
    overflow-y: auto;
    display: none;
}

/* Special styling for Goto dropdown to accommodate 20 characters */
#gotoDropdown .dropdown-content {
    min-width: 250px;
}

/* Toggle button styling - ensure it's visible */
#menuToggleBtn {
    background: #007bff;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

/* Show dropdown only when active (controlled by JavaScript) */
.dropdown-container.active .dropdown-content {
    display: block;
}

/* Dropdown Items */
.dropdown-item {
    display: block;
    padding: 10px 16px;
    color: #495057;
    text-decoration: none;
    border-bottom: 1px solid #f8f9fa;
    transition: background-color 0.2s ease;
}

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

.dropdown-item:last-child {
    border-bottom: none;
}

/* Title Input */
.top-menu-title {
    margin: 0 15px;
    font-size: 14px;
    padding: 4px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    min-width: 200px;
    height: 28px;
}

/* Right Side Buttons */
.right-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ========================================
   CELL & NOTEBOOK COMPONENTS
   ======================================== */

/* Cell Structure */
.cell {
    background-color: #fff;
    border: none;
    border-radius: 0;
    margin-bottom: 15px;
    box-shadow: none;
    display: flex;
    flex-direction: column; /* Stack menus/content vertically */
    transition: background-color 0.3s ease; /* Simplified transition */
    position: relative; /* For absolute positioning of sidebar */
    width: 100% !important;
    max-width: none !important;
}

/* No Card Layout Style */
body.no-card-layout .cell {
     background-color: transparent;
     border: none;
     border-radius: 0;
     margin-bottom: 5px; /* Smaller margin */
     box-shadow: none;
     border-top: 1px solid #eee; /* Separator */
 }

body.no-card-layout .cell:first-child {
     border-top: none; /* No border for the very first */
}

.cell-content {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    padding: 10px;
    /* Use stretch to make children equal height */
    align-items: stretch !important;
    /* Add some gap */
    gap: 10px;
    /* Ensure children can grow to match tallest sibling */
    align-content: stretch;
}

/* Input/Output Areas - Basic width constraints */
.input-area {
    width: 100% !important;
    max-width: none !important;
} 

.output-area {
    width: 100% !important;
    max-width: none !important;
}

/* Between-Cell Hover Area Styles */
.between-cell-hover-area {
    position: relative; 
    height: 8px;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.between-cell-add-button {
    background: #6c757d;
    color: white;
  border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.between-cell-add-button:hover {
    background: #5a6268;
    transform: scale(1.1);
}

/* ========================================
   MODAL & DIALOG COMPONENTS
   ======================================== */

/* Modal Overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
}

.modal-overlay.visible {
    display: flex;
}

/* Modal Content */
.modal-content {
    background: white;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    min-width: 500px; /* Increased min-width */
    max-width: 800px; /* Increased max-width */
    width: 80%;     /* Allow it to take percentage width up to max */
    max-height: 90vh; /* Limit modal height to 90% of viewport */
    overflow-y: auto; /* Enable scrolling when content exceeds height */
    position: relative;
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #aaa;
}

.modal-close-btn:hover {
    color: #333;
}

.modal-content h2 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
}

/* Tags Editor Modal Layout */
.tags-editor-modal {
    min-width: 900px !important;
    max-width: 1200px !important;
    width: 90% !important;
}

.tags-editor-layout {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.tags-editor-main {
    flex: 1;
    min-width: 0;
}

.tags-editor-main label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

.tags-editor-main textarea {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    resize: vertical;
}

.tags-editor-sidebar {
    width: 280px;
    flex-shrink: 0;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 15px;
}

.tags-editor-sidebar h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
}

.tag-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tag-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tag-item code {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    background-color: #e9ecef;
    padding: 4px 6px;
    border-radius: 3px;
    color: #495057;
    font-weight: 500;
}

.tag-description {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.3;
    margin-left: 2px;
}

/* ========================================
   FORM & INPUT COMPONENTS
   ======================================== */

.pref-group {
    margin-bottom: 15px;
    /* NEW: Use Flexbox for layout */
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 10px; /* Add space between elements */
}

.pref-group label {
    /* display: block; */ /* Removed */
    /* margin-bottom: 5px; */ /* Removed */
    font-weight: bold;
    flex-shrink: 0; /* Prevent label from shrinking */
    /* Optional: Set a fixed width */
    /* width: 180px; */ 
}

/* Allow controls to take remaining space if needed */
.pref-group select,
.pref-group input[type="number"] {
     flex-grow: 1;
}

/* Keep checkboxes aligned nicely */
.pref-group div {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Wrap if needed */
    gap: 5px 15px; /* Row and column gap */
}

.pref-group div label { /* Labels next to checkboxes */
    font-weight: normal; /* Normal weight for checkbox labels */
    /* width: auto; */ /* Allow natural width */
}

.pref-group input[type="checkbox"] {
    margin-right: 0; /* Remove default margin if any */
    padding: 4px;
    border: 1px solid #ccc;
}

.help-text {
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
}

.help-text code {
    background-color: #e9ecef;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
}

/* Split Cell Modal Styles */
.create-cells-form {
    margin-top: 20px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background: white;
}

.form-select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.form-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 25px;
}

/* ========================================
   BUTTON & INTERACTIVE ELEMENTS
   ======================================== */

/* Widget Styles */
.widget-container {
    display: flex;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden; /* Contain children */
    margin-bottom: 10px; /* Space below widget */
    background-color: #fdfdfd;
}

.widget-layout-vertical {
    flex-direction: column;
}

.widget-layout-horizontal {
    flex-direction: row;
}

.widget-controls {
    padding: 15px;
    background-color: #f8f9fa;
    border-right: 1px solid #e0e0e0; /* Vertical separator */
    box-sizing: border-box;
}

.widget-layout-vertical .widget-controls {
    border-right: none;
    border-bottom: 1px solid #e0e0e0; /* Horizontal separator */
}

.widget-controls label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 0.9em;
    color: #333;
}

.widget-controls input[type="range"],
.widget-controls input[type="text"],
.widget-controls input[type="number"],
.widget-controls select {
    width: 100%;
    padding: 6px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

.widget-controls input[type="checkbox"] {
    margin-right: 5px;
}

.widget-controls .control-group {
     margin-bottom: 15px;
}

.widget-controls .range-group {
    display: flex;
     align-items: center;
     gap: 8px;
}

.widget-controls .range-group input[type="range"] {
     flex-grow: 1;
     margin-bottom: 0; /* Reset margin */
}

.widget-controls .range-group span { /* Value display */
     min-width: 30px;
     text-align: right;
     font-size: 0.9em;
     color: #555;
}

.widget-controls button {
    padding: 8px 15px;
    margin-top: 10px;
}

.widget-output {
    flex-grow: 1; /* Take remaining space */
    padding: 15px;
    min-height: 100px; /* Ensure some min height */
    overflow: auto; /* Add scroll if needed */
    box-sizing: border-box;
    background-color: #fff;
}

.widget-output pre {
     margin: 0;
     background-color: transparent;
     white-space: pre-wrap; /* Wrap text */
     word-break: break-all; /* Break long words */
}

.widget-output-loading {
    opacity: 0.6;
    position: relative; /* For potential spinner pseudo-element */
}

/* Widget Text Elements */
.widget-headline {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.widget-text-above,
.widget-text-below {
    font-size: 1em;
    margin-bottom: 10px; /* Spacing above/below main widget */
    color: #555;
}

.widget-text-below {
    margin-top: 10px; /* Add space above if below widget */
    margin-bottom: 0;
}

/* Downloader Widget Status */
.widget-downloader-status {
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.widget-downloader-status.loading {
    background-color: #eef;
    border-color: #ccd;
}

.widget-downloader-status.success {
    background-color: #e9f5e9;
    border-color: #c3e6cb;
    color: #155724;
}

.widget-downloader-status.error {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Play Function Widget Styles */
.play-function-container {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
    background-color: #f8f9fa;
}

.play-function-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.play-function-title {
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.play-function-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.play-function-button {
    padding: 6px 12px;
    border: 1px solid #007bff;
    background-color: #007bff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.play-function-button:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.play-function-button:disabled {
    background-color: #6c757d;
    border-color: #6c757d;
    cursor: not-allowed;
}

.play-function-status {
    font-size: 12px;
    color: #6c757d;
    margin-left: 8px;
}

.play-function-output {
    margin-top: 10px;
    padding: 10px;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    max-height: 200px;
    overflow-y: auto;
}

/* Draw Mode Button */
#toggleDrawModeBtn.active {
    background-color: #d0e7ff; /* Light blue highlight */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* End Draw Button - Hidden by default (JavaScript will override this) */
#endDrawBtn {
    display: none !important;
}

/* Allow JavaScript to override the display property */
#endDrawBtn[style*="display: inline-block"] {
    display: inline-block !important;
}

/* Top Menu Dropdown Color Controls */
.top-menu-dropdown-color-input {
    width: 100%;
    height: 30px;
    margin-bottom: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.top-menu-dropdown-color-presets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}

.color-preset {
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.color-preset:hover {
    transform: scale(1.1);
}

.top-menu-dropdown-range {
    width: 100%;
    margin: 8px 0;
}

/* Top Menu Right Buttons */
.top-menu-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-menu-right button {
    background: none;
    border: none;
    color: #343a40;
    padding: 8px;
    cursor: pointer;
    font-size: 14px;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-menu-right button:hover {
    background-color: #e9ecef;
    border-radius: 4px;
}

/* Button Styles */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.btn-secondary {
    background-color: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background-color: #545b62;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Comment Sidebar */
.comment-sidebar {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100vh;
    background-color: #fff;
    border-left: 1px solid #ddd;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.comment-sidebar.visible {
    right: 0;
}

.comment-sidebar-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    background-color: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-sidebar-header h3 {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.comment-sidebar-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #666;
    padding: 5px;
}

.comment-sidebar-close:hover {
    color: #333;
}

.comment-form {
    padding: 15px;
    border-bottom: 1px solid #eee;
}

.comment-form textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
}

.comment-form button {
    margin-top: 10px;
    padding: 8px 16px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.comment-form button:hover {
    background: #0056b3;
}

.comments-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
}

.comment-item {
    margin-bottom: 15px;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #007bff;
}

.comment-item .comment-author {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.comment-item .comment-text {
    color: #555;
    line-height: 1.4;
}

.comment-item .comment-time {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}

/* Main Content Area */
.main-content {
    display: flex;
    flex-grow: 1; /* Take remaining vertical space */
    padding: 15px;
    overflow-y: auto; /* Allow content area to scroll if needed */
}

/* Sidebars */
.sidebar {
    background-color: #e9ecef; /* Light gray */
    padding: 15px;
    border: 1px solid #dee2e6;
    display: none; /* Hidden by default */
    min-width: 200px; /* Example width */
    overflow-y: auto;
}

.sidebar.left { 
    border-right: 1px solid #dee2e6; 
}

.sidebar.right { 
    border-left: 1px solid #dee2e6; 
}

/* Notebook Area (Center) */
.notebook-area {
    width: var(--notebook-width, 100%) !important;
    max-width: var(--notebook-max-width, 900px) !important;
    margin: var(--notebook-margin, 0 auto) !important;
    padding: var(--notebook-padding, 0 20px) !important;
    box-sizing: border-box !important;
    flex-grow: 1 !important; /* Takes up available space */
    transition: max-width 0.3s ease, margin 0.3s ease; /* Optional transition */
}

/* Full Width Style */
body.use-full-width .notebook-area {
    max-width: none;
    margin: 0;
}

/* Cell Menu and Output Menu */
.cell-menu, .output-menu { /* Hide menus by default */
    display: none;
    background-color: #f8f9fa;
    padding: 3px 8px;
    border-bottom: 1px solid #e9ecef;
    align-items: center;
    font-size: 12px;
    min-height: 25px; /* Ensure menu has some height */
}

.cell-menu span, .cell-menu select { /* Simple text/select for now */
    margin-right: 8px;
}

.cell-menu .cell-actions { /* Push actions to the right */
    margin-left: auto;
}

/* Cell Sidebar Styling */
.cell-sidebar {
    position: absolute;
    right: 8px;
    top: 6px;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 2000;
}

.cell-sidebar:hover {
    z-index: 1000;
}

.cell-sidebar-trigger {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
    opacity: 0;
    transition: all 0.2s ease;
    border-radius: 4px;
    background: none;
    border: none;
    visibility: hidden;
}

/* Show trigger on cell hover or when cell is focused */
.cell:hover .cell-sidebar-trigger,
.cell-focused .cell-sidebar-trigger {
    opacity: 0.7;
    visibility: visible;
}

.cell-sidebar-trigger:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.cell-sidebar-content {
    position: absolute;
    right: 36px; /* place to the left of the trigger */
    top: 4px;
    width: auto;
    height: auto;
    background: rgba(248, 249, 250, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: none; /* hidden until hover/JS */
    flex-direction: row; /* horizontal row of icons */
    align-items: center;
    justify-content: flex-end;
    padding: 6px 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    gap: 6px;
    z-index: 3000;
    backdrop-filter: blur(2px);
    pointer-events: auto;
    white-space: nowrap;
}

.cell-sidebar:hover .cell-sidebar-content { display: flex; }

.cell-type-dropdown {
    position: relative;
}

.cell-type-options {
    position: absolute;
    right: 100%;
    top: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 160px;
    max-height: 500px;
    overflow-y: auto;
    margin-right: 8px;
}

.cell-type-option {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
    font-size: 13px;
}

.cell-type-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

.cell-type-option:last-child {
    border-bottom: none;
}

/* Input Area - let CodeMirror size naturally but match output height */
.input-area {
    flex: 1 1 50%; /* Allow grow/shrink, base 50% */
    display: flex; /* Layout run button and editor */
    position: relative; /* For absolute positioning of sidebar */
    min-height: 3.2em; /* 3 lines of whitespace (3 * 1.4 line-height) */
    flex-direction: column;
    align-self: stretch; /* Match output height - let flexbox handle equal heights */
    overflow: visible; /* No scrolling - let content determine height */
    height: auto; /* Let it size to content */
    max-height: none; /* No height limits */
}

/* Input area with CodeMirror - let CodeMirror handle content sizing */
.input-area .CodeMirror {
    height: auto !important; /* Let CodeMirror handle content-based sizing */
    min-height: 2.8em; /* Minimum 2 lines of text */
    max-height: none !important; /* No height limits */
    overflow: visible !important; /* No scrolling at all - show all content */
    padding-bottom: 1.4em; /* Add extra space below content (1 line height) */
    flex: 1 1 auto; /* Grow to fill input-area height */
}

/* Ensure CodeMirror editor div has no height constraints */
.input-area .CodeMirror .CodeMirror-editor {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.input-run-sidebar {
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-right: none; /* Removed border */
    /* margin-right: 8px; */ /* Removed */
    background-color: #f8f9fa; /* Give it a subtle background */
    border: none; /* No border at all */
    border-radius: 4px; /* Slightly rounded corners */
    /* --- NEW: Hide by default, show on hover/focus --- */
    position: absolute;
    left: 0;
    top: 0;
    height: 100%; 
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, background-color 0.2s ease-in-out;
    z-index: 10; /* Ensure it appears above editor */
}

.input-area:hover .input-run-sidebar,
.cell-focused .input-area .input-run-sidebar {
    visibility: visible;
    opacity: 1;
    background-color: #e9ecef; /* Subtle color tone change instead of border */
}

.input-editor { 
    flex-grow: 1; /* Let editor fill space within input-area */
    padding-left: 35px; /* Space for the absolute sidebar */
    display: flex; /* Allow CodeMirror to grow */
    flex-direction: column;
    position: relative; 
    /* overflow: hidden; */ /* Removed */
    /* NEW: Ensure it fills height */
    height: 100%; 
}

/* Output Area */
/* Output Area - let content size naturally but match input height */
.output-area {
    flex: 1 1 50%; /* Allow grow/shrink, base 50% */
    background-color: #f9f9f9; /* Match original background color */
    min-height: 3.2em; /* 3 lines of whitespace (3 * 1.4 line-height) */
    position: relative; 
    display: flex; /* Arrange sidebar and content */
    flex-direction: column;
    min-width: 0; /* Allow flex item to shrink below content size */
    align-self: stretch; /* Match input height - let flexbox handle equal heights */
}

.output-content-wrapper { 
    flex-grow: 1; /* Grow to fill output-area */
    padding: 2px;
    padding-right: 2px;    /* Removed space for right sidebar */
    border-right: none; /* Removed dashed border */
    position: relative; 
    overflow-x: auto;
    height: auto; /* Let it size to content instead of 100% */
    word-break: break-all; /* NEW: Force breaks in long words/strings */
}

/* Hide the old top output menu */
.output-area > .output-menu {
    display: none !important; /* Override focus style if needed */
}

/* Output Sidebar Toggle Button */
.output-sidebar-toggle-input-btn {
    display: block !important; /* Force display */
    opacity: 1 !important; /* Force full opacity */
    visibility: visible !important; /* Force visibility */
}

/* Fullscreen Output Styling */
.output-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    background-color: rgba(249, 249, 249, 0.98); /* Slightly transparent */
    display: flex; /* Use flex for sidebar + content */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    border: none; /* Remove border */
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    font-size: 14px;
}

.output-fullscreen .output-sidebar {
    height: 100%; /* Full height */
}

.output-fullscreen .output-content-wrapper {
    height: 100%;
    overflow: auto; /* Allow scrolling */
    border-left: 1px solid #ccc; /* Keep separator */
}

.output-area pre {
    background-color: transparent; /* Inherit background */
    padding: 0;
    margin: 0;
    border: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.output-area table { /* Basic table styling */
    border-collapse: collapse;
    width: auto; /* Don't force 100% width */
    margin-top: 5px;
    font-size: 13px;
}

.output-area th, .output-area td {
    border: 1px solid #ddd;
    padding: 4px 8px;
    text-align: left;
}

.output-area th { 
    background-color: #f1f1f1; 
}

/* Adjust focus style for no-card layout */
body.no-card-layout .cell-focused {
    background-color: transparent; /* No background highlight on focus */
}

/* Collapsed Cell Styling */
.cell-collapsed > .cell-content {
    max-height: 25px !important; /* Keep collapsed cells collapsed */
    overflow: hidden; /* Hide content when collapsed */
    padding-top: 0;
    padding-bottom: 0;
}

.cell > .cell-content {
    transition: padding 0.3s ease-out; /* Removed max-height transition */
}

/* Collapsed Output Styling */
.output-collapsed > .output-content {
    display: none;
}

.output-collapsed > .output-menu .collapse-output-btn::after {
    content: '▶️'; /* Expand icon */
}

/* Fullscreen Output Styling */
.output-fullscreen {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    background-color: rgba(249, 249, 249, 0.98); /* Slightly transparent */
    display: flex; /* Use flex for sidebar + content */
    padding: 0; /* Remove padding */
}

/* Cell Title Styles */
.cell-title {
    text-align: center;
    margin-bottom: 15px;
    padding: 5px 0;
    color: #333;
    font-size: 2em;
    font-weight: bold;
    border-bottom: 2px solid #007bff;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.cell-title h1, .cell-title h2, .cell-title h3, .cell-title h4, .cell-title h5, .cell-title h6 {
    margin: 0;
    color: #333;
}

.cell-title p {
    margin: 0;
}

.cell-title strong, .cell-title b {
    color: #333;
}

.cell-title em, .cell-title i {
    color: #333;
}

.cell-title code {
    background: #f5f5f5;
    color: #333;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.cell-title a {
    color: #0066cc;
    text-decoration: none;
}

.cell-title a:hover {
    text-decoration: underline;
}

/* ========================================
   MEDIA QUERIES & RESPONSIVE STYLES
   ======================================== */

@media (max-width: 768px) {
    .top-menu-container {
        padding: 8px 15px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .modal-content {
        min-width: 90%;
        max-width: 95%;
        margin: 20px;
        padding: 15px 20px;
    }
    
    .tags-editor-modal {
        min-width: 95% !important;
        max-width: 95% !important;
        width: 95% !important;
    }
    
    .tags-editor-layout {
        flex-direction: column;
        gap: 15px;
    }
    
    .step-nav-menu {
        bottom: 10px;
        right: 10px;
        padding: 6px;
    }
    
    .step-nav-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* ========================================
   SPECIAL MODES & OVERRIDES
   ======================================== */

/* Step Mode CSS - Now handled by JavaScript */
/* Removed CSS-based step mode in favor of JavaScript-driven approach */

/* Global Hide Input Mode */
.notebook-area.global-hide-input .cell .input-area {
    display: none;
}

.notebook-area.global-hide-input .cell .output-area {
    flex-basis: 100%; /* Take full width */
    border-left: none; /* Remove the divider */
}

.notebook-area.global-hide-input .cell .output-content-wrapper {
    border-left: none; /* Remove inner border if any */
    padding-left: 0; /* Remove padding if desired */
}

/* Global Hide Output Mode */
.notebook-area.global-hide-output .cell .output-area {
    display: none;
}

.notebook-area.global-hide-output .cell .input-area {
    flex-basis: 100%; /* Take full width */
    border-right: none; /* Remove the divider if it exists visually */
}

/* Presentation Mode Styles */
body:not(.presentation-mode-active):not(.movie-mode-active) .cell-title {
    display: none;
}

/* Hide add cell line in presentation and movie modes */
body.presentation-mode-active .between-cell-hover-area,
body.movie-mode-active .between-cell-hover-area {
    display: none !important;
}

body.presentation-mode-active .notebook-area {
    --notebook-padding: 0 40px;
    --notebook-max-width: 1400px;
}

body.presentation-mode-active .top-menu {
    --top-menu-padding: 5px 40px;
    --top-menu-max-width: 1400px;
}

body.movie-mode-active .top-menu {
    --top-menu-padding: 5px 20px;
    --top-menu-max-width: none;
}

/* Hide top menu in both presentation and movie modes by default */
body.presentation-mode-active .top-menu,
body.movie-mode-active .top-menu {
    display: none !important;
}

/* Allow JavaScript to override and show the menu when needed */
body.presentation-mode-active .top-menu[style*="display: flex"],
body.movie-mode-active .top-menu[style*="display: flex"] {
    display: flex !important;
}

/* Only show cell titles in presentation and movie modes */
body:not(.presentation-mode-active):not(.movie-mode-active) .cell-title {
    display: none;
}

body.movie-mode-active .notebook-area {
    --notebook-padding: 0 20px;
    --notebook-max-width: none;
}

body.output-only-mode .notebook-area {
    --notebook-padding: 0 30px;
    --notebook-max-width: 1200px;
}

body.output-only-mode .top-menu {
    --top-menu-padding: 5px 30px;
    --top-menu-max-width: 1200px;
}

/* Top Menu CSS Variables */
.top-menu {
    width: var(--top-menu-width, 100%) !important;
    max-width: var(--top-menu-max-width, none) !important;
    margin: var(--top-menu-margin, 0) !important;
    padding: var(--top-menu-padding, 5px 15px) !important;
    box-sizing: border-box !important;
}

/* Enhanced Embed Files Modal Styling */
#embeddedFilesList .delete-embed-btn {
    color: #dc3545 !important;
    cursor: pointer !important;
    font-size: 1em !important;
    opacity: 0.7 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

#embeddedFilesList .delete-embed-btn:hover {
    opacity: 1 !important;
    background: rgba(220, 53, 69, 0.1) !important;
}

#addEmbeddedFileBtn {
    background: #007bff !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

#addEmbeddedFileBtn:hover {
    background: #0056b3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3) !important;
}

#addEmbeddedFileBtn:active {
    transform: translateY(0) !important;
}

/* Notification System Styling */
.notification {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    color: white !important;
    font-weight: 500 !important;
    z-index: 10000 !important;
    max-width: 400px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.notification.success {
    background-color: #28a745 !important;
    border-left: 4px solid #1e7e34 !important;
}

.notification.error {
    background-color: #dc3545 !important;
    border-left: 4px solid #c82333 !important;
}

.notification.warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
    border-left: 4px solid #e0a800 !important;
}

.notification.info {
    background-color: #17a2b8 !important;
    border-left: 4px solid #138496 !important;
}

.notification.show {
    transform: translateX(0) !important;
}

/* Publish Cloud Modal */
#publishCloudModal .form-group {
    margin-bottom: 15px;
}

#publishCloudModal label {
    display: block;
    margin-bottom: 5px;
}

#publishCloudModal input[type="text"],
#publishCloudModal input[type="password"],
#publishCloudModal select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#publishCloudModal .status-message {
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
    display: none;
}

#publishCloudModal .status-message.error {
    display: block;
    background-color: #f8d7da;
    color: #721c24;
}

#publishCloudModal .status-message.success {
    display: block;
    background-color: #d4edda;
    color: #155724;
}

/* File Upload Options */
.file-upload-options {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
}

.file-upload-options h3 {
    margin: 0 0 15px 0 !important;
    font-size: 16px !important;
    color: #495057 !important;
    font-weight: 600 !important;
}

.file-language-select {
    width: 100% !important;
    padding: 8px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    background: white !important;
    transition: border-color 0.2s ease !important;
}

.file-language-select:focus {
    outline: none !important;
    border-color: #007bff !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1) !important;
}

.storage-options {
    display: flex !important;
    gap: 15px !important;
    flex-wrap: wrap !important;
}

.storage-option {
    flex: 1 !important;
    min-width: 120px !important;
    padding: 10px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
}

.storage-option:hover {
    border-color: #007bff !important;
    background: #f8f9ff !important;
}

.storage-option.selected {
    border-color: #007bff !important;
    background: #e3f2fd !important;
    color: #007bff !important;
}

.storage-option input[type="radio"] {
    margin-right: 8px !important;
}

.storage-option label {
    margin: 0 !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

/* Load Cloud Modal */
#loadCloudModal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #eee;
}

#loadCloudModal li {
    padding: 0;
    border-bottom: 1px dotted #eee;
    display: flex; /* Arrange button and actions horizontally */
    justify-content: space-between; /* Push actions to the right */
    align-items: center; /* Vertically align items */
}

#loadCloudModal li:last-child {
    border-bottom: none;
}

#loadCloudModal li .notebook-load-button {
    flex-grow: 1; /* Allow button to take available space */
    text-align: left;
    padding: 8px 12px;
    border: none;
    background: none;
    cursor: pointer;
    color: #000000; /* Black font color */
    display: block;
    width: 100%;
}

#loadCloudModal li .notebook-load-button:hover {
    background-color: #f0f0f0; /* Apply hover only to load button */
}

#loadCloudModal li .notebook-actions {
    display: flex;        /* Arrange icons horizontally */
    align-items: center;  /* Align icons vertically */
    flex-shrink: 0; /* Prevent action icons from shrinking */
    padding-right: 10px; /* Space on the right */
}

#loadCloudModal li .notebook-action-icon {
    background: none;
    border: none;
    color: #6c757d; /* Grey icon color */
    cursor: pointer;
    padding: 4px;
    margin: 0 2px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

#loadCloudModal li .notebook-action-icon:hover {
    background: rgba(108, 117, 125, 0.1);
    color: #495057;
}

#loadCloudModal .error {
    color: #dc3545;
    font-style: italic;
    padding: 8px 12px;
}

/* Enhanced Top Menu Styling */
.top-menu-dropdown:hover .top-menu-dropdown-content {
    background: rgba(255, 255, 255, 0.95) !important;
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Force consistent background for goto dropdown */
#gotoDropdownContent,
#gotoDropdownContent:hover,
.top-menu-dropdown:hover #gotoDropdownContent {
    background: rgba(255, 255, 255, 0.98) !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
}

/* Add some padding to dropdown items for better hover targets */
.top-menu-dropdown-content .top-menu-dropdown-item {
    padding: 12px 20px !important;
    margin: 2px 8px !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
}

/* Improve hover feedback */
.top-menu-dropdown-content .top-menu-dropdown-item:hover {
    background: rgba(0, 123, 255, 0.08) !important;
    color: #007bff !important;
    transform: translateX(4px) !important;
}

/* Improved visual hierarchy with subtle shadows */
.top-menu-dropdown {
    margin-right: 12px !important;
}

/* Enhanced Top Menu Styling */
.top-menu {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    border-bottom: 1px solid rgba(222, 226, 230, 0.6) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08) !important;
    height: 48px !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 0 0 16px 16px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    display: flex !important;
    align-items: center !important;
}

.top-menu-dropdown-btn {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(222, 226, 230, 0.4) !important;
    color: #495057 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.top-menu-dropdown-btn:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(0, 123, 255, 0.3) !important;
    color: #007bff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15) !important;
}

.top-menu-dropdown-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.2) !important;
}

.top-menu-dropdown-content {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    margin-top: 8px !important;
    min-width: 220px !important;
    max-width: 400px !important;
    z-index: 1001 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    display: none !important;
}

.top-menu-dropdown.active .top-menu-dropdown-content {
    display: block !important;
}

.top-menu-dropdown-content .top-menu-dropdown-item {
    color: #495057 !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    border-radius: 12px !important;
    margin: 2px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.top-menu-dropdown-content .top-menu-dropdown-item:hover {
    background: rgba(0, 123, 255, 0.08) !important;
    color: #007bff !important;
    transform: translateX(4px) !important;
}

.top-menu-dropdown-item.active {
    background-color: #d9edf7 !important;
    color: #31708f !important;
    font-weight: bold;
}

.top-menu-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    border: 1px solid rgba(222, 226, 230, 0.6) !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    color: #495057 !important;
    transition: all 0.2s ease !important;
    min-width: 200px !important;
    margin: 0 15px !important;
}

.top-menu-title:focus {
    border-color: rgba(0, 123, 255, 0.4) !important;
    background: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) !important;
}

.top-menu-right button {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(222, 226, 230, 0.4) !important;
    color: #495057 !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 32px !important;
    width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.top-menu-right button:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(0, 123, 255, 0.3) !important;
    color: #007bff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15) !important;
}

/* Enhanced title input styling */
.top-menu-title::placeholder {
    color: #adb5bd !important;
    font-style: italic !important;
}

/* CodeMirror Editor Styles */
/* General CodeMirror styles - let it handle content-based sizing */
.CodeMirror {
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 2.8em; /* 2 lines of text (2 * 1.4 line-height) */
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.4;
    height: auto !important; /* Let CodeMirror handle content-based sizing */
    max-height: none !important; /* No height limits */
    overflow: visible !important; /* No scrolling at all - show all content */
    padding-bottom: 1.4em; /* Add extra space below content (1 line height) */
}

/* CodeMirror auto-resize behavior */
.CodeMirror.CodeMirror-focused {
    min-height: 2.8em; /* Minimum 2 lines when focused */
}

/* Ensure CodeMirror grows with content but maintains minimum */
.CodeMirror .CodeMirror-scroll {
    min-height: 2.8em; /* Minimum 2 lines */
    /* Ensure scroll container can stretch to parent height when input grows */
    min-height: 100% !important;
}

.CodeMirror-scroll {
    overflow: visible !important; /* No scrolling at all - show all content */
    max-height: none !important;
    height: auto !important; /* Let it size to content */
}

/* Force font sizes to override CodeMirror CSS */
.CodeMirror {
    font-size: var(--cell-font-size, 14px) !important;
}

/* Allow JavaScript to set font sizes with !important */
.cell[data-font-size] .CodeMirror {
    font-size: var(--cell-font-size) !important;
}

/* Force height system to override CSS defaults */
.input-area, .output-area {
    min-height: auto !important;
}

/* Ensure equal heights by default - both areas stretch to match tallest */
.cell .input-area,
.cell .output-area {
    min-height: 3.2em !important; /* 3 lines of whitespace (3 * 1.4 line-height) */
    max-height: none !important; /* No height limits - let content determine size */
    align-self: stretch !important; /* Force equal height */
}

/* Ensure cells themselves have no height constraints */
.cell {
    max-height: none !important; /* No height limits on cells */
}

.cell .cell-content {
    max-height: none !important; /* No height limits on cell content */
}

/* Global override: Remove ALL max-height constraints from cell-related elements (except collapsed cells) */
.cell:not(.cell-collapsed),
.cell:not(.cell-collapsed) *,
.input-area,
.input-area *,
.output-area,
.output-area *,
.CodeMirror,
.CodeMirror * {
    max-height: none !important;
}

/* Allow user-defined max-heights to override the global rule */
.cell[style*="max-height"]:not(.cell-collapsed),
.cell[style*="max-height"]:not(.cell-collapsed) *,
.input-area[style*="max-height"],
.input-area[style*="max-height"] *,
.output-area[style*="max-height"],
.output-area[style*="max-height"] * {
    max-height: inherit !important; /* Allow user-defined max-height to take effect */
    overflow-y: visible !important; /* No scrolling unless content actually exceeds container */
}

/* Specific overrides for CodeMirror internal elements */
.CodeMirror-lines,
.CodeMirror-line,
.CodeMirror-code,
.CodeMirror-cursor,
.CodeMirror-selected,
.CodeMirror-focused .CodeMirror-selected {
    max-height: none !important;
}

/* Legacy image rules - now handled by plot standardization system above */

/* ========================================
   PLOT AND IMAGE STANDARDIZATION SYSTEM
   ======================================== */

/* CSS Variables for plot/image sizing */
:root {
    --plot-max-width: 60vw;           /* Default max width in split mode (code + output) */
    --plot-max-height: 60vh;          /* Default max height in split mode (code + output) */
    --plot-container-padding: 10px;   /* Padding around plot containers */
    --plot-border-radius: 8px;        /* Border radius for plot containers */
    /* Static (non-interactive) plot sizing */
    --static-max-width: 60vw;         /* Default static plot max width in split mode */
    --static-max-height: 60vh;        /* Default static plot max height in split mode */
    /* Plotly interactive default minimum height */
    --plot-min-height: 450px;
}

/* Wrapper containers */
.plot-container,
.mermaid-wrapper {
    display: block;
    width: 100%;
    max-width: var(--plot-max-width);
    margin: 0 auto;
    padding: var(--plot-container-padding);
    box-sizing: border-box;
}

/* Specific styling for different plot types */
.plot-container img,
.output-area img {
    display: block;
    max-width: 100%;
    max-height: var(--plot-max-height) !important;
    height: auto;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: var(--plot-border-radius);
}

.plot-container svg,
.output-area svg,
.mermaid-wrapper svg {
    display: block;
    max-width: 100%;
    max-height: var(--plot-max-height) !important;
    height: auto;
    width: auto;
    margin: 0 auto;
}

.plot-container canvas,
.output-area canvas {
    display: block;
    max-width: 100%;
    max-height: var(--plot-max-height) !important;
    height: auto;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: var(--plot-border-radius);
}

/* Plotly specific styling - now handled by main .plotly-target rule above */

/* User override support - when tags set specific sizes */
.output-area[style*="width"] .plot-container,
.output-area[style*="width"] img,
.output-area[style*="width"] svg,
.output-area[style*="width"] canvas,
.output-area[style*="width"] .plotly-target {
    max-width: inherit;
    width: inherit;
}

.output-area[style*="height"] .plot-container,
.output-area[style*="height"] img,
.output-area[style*="height"] svg,
.output-area[style*="height"] canvas,
.output-area[style*="height"] .plotly-target {
    max-height: inherit;
    height: inherit;
}

/* Mode-specific adjustments */
body.movie-mode-active {
    --plot-max-width: 90vw;
    --plot-max-height: 90vh;
    --static-max-width: 90vw;
    --static-max-height: 90vh;
}
/* Presentation mode: stricter caps (60vw/60vh) */
body.presentation-mode-active {
    --plot-max-width: 70vw;
    --plot-max-height: 70vh;
    --static-max-width: 70vw;
    --static-max-height: 70vh;
}


body.output-only-mode {
    --plot-max-width: 90vw;
    --plot-max-height: 90vh;
    --static-max-width: 90vw;
    --static-max-height: 90vh;
}

/* Static plot/image class - used for non-interactive outputs (img/canvas) */
.plot-static {
    display: block;
    width: 100%;
    max-width: var(--static-max-width);
    max-height: var(--static-max-height) !important;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: var(--plot-border-radius);
}

/* Explicit split-mode caps to prevent accidental overrides */
/* Intentionally no extra constraints for .plotly-target in split mode */

/* Explicit presentation-mode caps to override global max-height:none rules */
body.presentation-mode-active .plot-static,
body.presentation-mode-active .output-area img,
body.presentation-mode-active .output-area svg,
body.presentation-mode-active .output-area canvas {
    max-width: 70vw !important;
    max-height: 70vh !important;
}
/* Presentation mode - handled by CSS variables in main .plotly-target rule */

/* ========================================
   SIMPLIFIED PLOTLY SIZING SYSTEM
   Single source of truth for all Plotly chart dimensions
   ======================================== */

/* CSS Variables for consistent sizing */
:root {
    --plot-default-height: 400px;
    --plot-faceted-height: 600px;
    --plot-min-width: 300px;
    --plot-min-height: 200px;
    /* Max constraints will be set by view mode CSS rules below */
}

/* Main Plotly container - handles all sizing */
.plotly-target {
    /* Fill available space */
    width: 100%;
    height: var(--plot-default-height);
    
    /* Size constraints */
    min-width: var(--plot-min-width);
    min-height: var(--plot-min-height);
    max-width: var(--plot-max-width, 60vw);  /* Use existing view mode variable */
    max-height: var(--plot-max-height, 60vh); /* Use existing view mode variable */
    
    /* Centering and layout */
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    
    /* Ensure proper display */
    display: block;
}

/* Faceted plots get more height */
.plotly-target[data-faceted="true"] {
    height: var(--plot-faceted-height);
    min-height: 400px; /* Larger minimum for faceted plots */
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    :root {
        --plot-min-width: 250px;
        --plot-min-height: 150px;
        --plot-default-height: 350px;
        --plot-faceted-height: 500px;
    }
}

/* Widget sizing constraints for different modes */
/* Normal split mode - widgets can be larger */
.widget-container {
    max-width: none; /* No constraints in normal mode */
    max-height: none;
}

/* Presentation and movie modes - constrain widget size (slightly smaller than plots) */
body.presentation-mode-active .widget-container,
body.movie-mode-active .widget-container {
    max-width: 85vw !important;  /* 10vw smaller than plots (95vw) */
    max-height: 75vh !important; /* 10vh smaller than plots (85vh) */
    margin: 0 auto; /* Center widgets */
}

/* Output-only mode - same widget constraints as presentation/movie modes */
body.output-only-mode .widget-container {
    max-width: 85vw !important;  /* Same as presentation/movie modes */
    max-height: 75vh !important; /* Same as presentation/movie modes */
    margin: 0 auto; /* Center widgets */
}

/* Widget output area constraints */
body.presentation-mode-active .widget-output,
body.movie-mode-active .widget-output,
body.output-only-mode .widget-output {
    max-width: 100%;
    max-height: 100%;
    overflow: visible; /* No scrolling unless content actually exceeds container */
}

/* Output content wrapper constraints for presentation/movie/output-only modes */
body.presentation-mode-active .output-content-wrapper,
body.movie-mode-active .output-content-wrapper,
body.output-only-mode .output-content-wrapper {
    overflow: visible !important; /* No unnecessary scrolling */
}

/* Plotly widgets - inherit from main .plotly-target rule */

/* Images and other plots within widgets */
body.presentation-mode-active .widget-output img,
body.movie-mode-active .widget-output img,
body.output-only-mode .widget-output img,
body.presentation-mode-active .widget-output svg,
body.movie-mode-active .widget-output svg,
body.output-only-mode .widget-output svg,
body.presentation-mode-active .widget-output canvas,
body.movie-mode-active .widget-output canvas,
body.output-only-mode .widget-output canvas {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Ensure cell content uses flexbox for equal height children */
.cell .cell-content {
    align-items: stretch !important;
    display: flex !important;
}

/* ========================================
   PLOTLY MODEBAR OVERRIDES (HORIZONTAL ROW)
   Multiple selectors to ensure proper targeting
   ======================================== */

/* Most specific selectors first */
.plotly-target .modebar,
.plotly-target .js-plotly-plot .modebar,
.plotly-div .modebar,
.plotly-div .js-plotly-plot .modebar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    width: 100% !important;
}

.plotly-target .modebar-group,
.plotly-target .js-plotly-plot .modebar-group,
.plotly-div .modebar-group,
.plotly-div .js-plotly-plot .modebar-group {
    display: inline-flex !important;
    flex-direction: row !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    align-items: center !important;
}

.plotly-target .modebar-btn,
.plotly-target .js-plotly-plot .modebar-btn,
.plotly-div .modebar-btn,
.plotly-div .js-plotly-plot .modebar-btn {
    display: inline-flex !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fallback for any remaining cases */
.js-plotly-plot .modebar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
.js-plotly-plot .modebar-group { 
    flex: 0 0 auto !important; 
    display: inline-flex !important;
}
.js-plotly-plot .modebar-btn { 
    flex: 0 0 auto !important; 
    display: inline-flex !important;
}

/* Additional modebar styling to ensure horizontal layout */
.modebar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    width: 100% !important;
    height: auto !important;
}

.modebar-group {
    display: inline-flex !important;
    flex-direction: row !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    align-items: center !important;
}

.modebar-btn {
    display: inline-flex !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide Plotly logo in the modebar */
.plotly-div .modebar-btn--logo,
.js-plotly-plot .modebar-btn--logo,
.plotly-div .modebar .logo,
.js-plotly-plot .modebar .logo,
.plotly-div .modebar .textlogo,
.js-plotly-plot .modebar .textlogo {
    display: none !important;
}

/* Menu Buttons in Sidebars */
.menu-btn {
    background: none;
    border: none;
    color: #6c757d; /* Bootstrap secondary color */
    padding: 4px;
    margin: 0;
    cursor: pointer;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-btn i {
    vertical-align: middle;
    font-size: 14px;
}

.menu-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #495057;
    opacity: 1;
    transform: scale(1.1);
}

/* Between-Cell Hover Area Styles */
.between-cell-hover-area {
    position: relative;
    height: 8px;
    margin: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.between-cell-add-button {
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.between-cell-add-button:hover {
    background: #5a6268;
    transform: scale(1.1);
}