/* Custom styles for the x86 Emulator */

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Base font */
body {
    font-family: 'Inter', sans-serif;
}

/* Custom monospace font */
.font-mono-custom {
    font-family: 'Roboto Mono', monospace;
}

/* Base styling for panels (code view, stack, heap, explanation) */
.panel-base {
    overflow-y: auto;
    border: 1px solid #e5e7eb; /* border-gray-200 */
    border-radius: 0.375rem; /* rounded-md */
    background-color: #f9fafb; /* bg-gray-50 */
    padding: 0.75rem; /* p-3 */
    flex-grow: 1;
}

/* Specific styling for the code display panel */
.code-display-panel {
    overflow-y: auto;
    background-color: #f9fafb; /* bg-gray-50 */
}

/* Terminal panel styling */
.terminal-panel {
    overflow-y: auto;
    background-color: #1f2937; /* bg-gray-800 */
    color: #f3f4f6; /* text-gray-100 */
    border: 1px solid #374151; /* border-gray-700 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 0.75rem; /* p-3 */
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875rem; /* text-sm */
    flex-grow: 1;
}

/* Input within the terminal (if needed later) */
.terminal-input {
    background: transparent;
    border: none;
    outline: none;
    color: inherit;
    font: inherit;
    width: 100%;
    padding-top: 5px;
}

/* Debug Terminal Output Styling */
.debug-terminal-output {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #1f2937; /* text-gray-800 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    font-size: 0.75rem; /* text-xs */
    font-family: 'Roboto Mono', monospace;
    /* Inherits panel-base for padding, border-radius, overflow */
}
.debug-terminal-output div {
    margin-bottom: 2px; /* Space between lines */
}
.debug-terminal-output .cmd-echo { /* Style for echoed command */
    color: #6b7280; /* text-gray-500 */
    font-style: italic;
}
.debug-terminal-output .cmd-error { /* Style for command errors */
    color: #dc2626; /* text-red-600 */
    font-weight: bold;
}

/* Debug Terminal Input Styling */
.debug-terminal-input {
    background-color: #ffffff; /* bg-white */
    color: #1f2937; /* text-gray-800 */
    border-color: #9ca3af; /* border-gray-400 */
}
.debug-terminal-input:focus {
    outline: none;
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 1px #3b82f6; /* focus:ring-1 focus:ring-blue-500 */
}


/* Blinking cursor effect for terminal (if needed) */
#terminalOutput div.current-line::after {
    content: '▋';
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    opacity: 1;
    color: #f3f4f6; /* text-gray-100 */
}

/* Compiler textarea styling */
#compiler-c-editor {
    line-height: 1.5;
    tab-size: 4;
    -moz-tab-size: 4;
    font-family: 'Roboto Mono', monospace !important;
    font-size: 0.875rem !important;
    padding: 0;
}

/* Style the placeholder text */
#compiler-c-editor::placeholder {
    color: #6b7280;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* Tab container */
.tab-container {
    display: flex;
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
    flex-wrap: wrap;
}

/* Individual tab buttons */
.tab-button {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem; /* px-4 py-2 */
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 0.375rem 0.375rem 0 0; /* rounded-t-md */
    cursor: pointer;
    background-color: #e5e7eb; /* bg-gray-200 */
    margin-right: 2px;
    margin-bottom: -1px; /* Overlap border */
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

/* Active tab button */
.tab-button.active {
    background-color: #f9fafb; /* bg-gray-50 */
    border-color: #e5e7eb; /* border-gray-200 */
    border-bottom-color: #f9fafb; /* Match panel background */
    z-index: 1;
}

/* Text part of the tab button */
.tab-button-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 5px; /* Space before close button */
}

/* Close button 'x' on tabs */
.tab-close-button {
    margin-left: auto;
    padding-left: 0.5rem; /* pl-2 */
    font-size: 0.75rem; /* text-xs */
    line-height: 1;
    font-weight: bold;
    color: #9ca3af; /* text-gray-400 */
    cursor: pointer;
}

.tab-close-button:hover {
    color: #374151; /* text-gray-700 */
}

/* Add new tab button '+' */
#addTabButton {
    padding: 0.5rem 0.75rem; /* px-3 py-2 */
    font-weight: bold;
    line-height: 1;
}

/* Grid layout for registers */
.register-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem; /* gap-2 */
}

/* Individual register display item */
.register-item {
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 0.25rem 0.5rem; /* px-2 py-1 */
    border-radius: 0.25rem; /* rounded-sm */
    border: 1px solid #e5e7eb; /* border-gray-200 */
    font-size: 0.8rem; /* Slightly smaller */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Register name (e.g., EAX:) */
.register-name {
    font-weight: 600; /* font-semibold */
    color: #4b5563; /* text-gray-600 */
    margin-right: 0.5rem; /* mr-2 */
}

/* Register value (e.g., 0x00000000) */
.register-value {
    color: #1f2937; /* text-gray-800 */
}

/* Styling for memory cells (Stack & Heap) */
.memory-cell {
    display: flex;
    border: 1px solid #cbd5e1; /* border-slate-300 */
    margin-bottom: -1px; /* Collapse borders */
    font-size: 0.8rem; /* Slightly smaller */
    background-color: #ffffff; /* bg-white */
    position: relative;
    cursor: default;
}

/* Specific cursor for clickable heap cells */
#heapVisualization .memory-cell {
    cursor: pointer;
}

#heapVisualization .memory-cell:hover {
    background-color: #eff6ff; /* bg-blue-50 */
}

/* Border radius for first/last cells */
.memory-cell:first-child {
    border-radius: 0.375rem 0.375rem 0 0;
}

.memory-cell:last-child {
    border-radius: 0 0 0.375rem 0.375rem;
    margin-bottom: 0;
}

/* Memory address part */
.memory-addr {
    flex-basis: 140px; /* Increased basis slightly for prefix */
    flex-shrink: 0;
    padding: 0.3rem 0.5rem;
    color: #64748b; /* text-slate-500 */
    background-color: #f1f5f9; /* bg-slate-100 */
    border-right: 1px solid #cbd5e1; /* border-slate-300 */
    text-align: right;
    white-space: nowrap;
    overflow: hidden; /* Hide overflow if still too long */
    text-overflow: ellipsis; /* Indicate hidden overflow */
}

/* Memory value part */
.memory-value {
    flex-grow: 1;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Memory label part (Stack specific) */
.memory-label {
    flex-basis: 130px;
    flex-shrink: 0;
    padding: 0.3rem 0.5rem;
    color: #475569; /* text-slate-600 */
    background-color: #f1f5f9; /* bg-slate-100 */
    border-left: 1px solid #cbd5e1; /* border-slate-300 */
    text-align: left;
    white-space: nowrap;
    font-size: 0.75rem; /* text-xs */
}

/* Stack cell type colors */
.cell-argument { background-color: #e0f2fe; } /* bg-sky-100 */
.cell-ret_addr { background-color: #fef9c3; } /* bg-yellow-100 */
.cell-saved_bp { background-color: #fef08a; font-weight: bold; } /* bg-yellow-200 */
.cell-local { background-color: #e0e7ff; } /* bg-indigo-100 */
.cell-buffer { background-color: #dbeafe; } /* bg-blue-100 */
.cell-padding { background-color: #f3f4f6; } /* bg-gray-100 */
.cell-other { background-color: #ffffff; } /* bg-white */
.cell-canary { background-color: #d1fae5; border: 2px solid #10b981; } /* bg-green-100 with green border */
.cell-canary-corrupted { background-color: #fee2e2; border: 2px solid #ef4444; animation: pulse-red 1s infinite; } /* bg-red-100 with red border and pulse */

/* Pulse animation for corrupted canary */
@keyframes pulse-red {
    0% { background-color: #fee2e2; }
    50% { background-color: #fca5a5; }
    100% { background-color: #fee2e2; }
}

/* Stack frame separator */
.frame-separator {
    border-top: 3px dashed #64748b; /* border-slate-500 */
    margin-top: -2px; /* Adjust for border */
}

/* Stack frame label (e.g., func1) */
.frame-label {
    position: absolute;
    right: 135px; /* Position near label column */
    top: -10px;
    font-size: 0.7rem;
    font-style: italic;
    color: #475569; /* text-slate-600 */
    background-color: #f1f5f9; /* bg-slate-100 */
    padding: 0 4px;
    z-index: 1;
}

/* Stack pointer labels (SP, BP) */
.pointer-label {
    position: absolute;
    left: -55px; /* Position outside the stack view */
    width: 40px;
    text-align: right;
    font-size: 0.7rem;
    font-weight: bold;
    color: #475569; /* text-slate-600 */
    transform: translateY(-50%); /* Center vertically */
    transition: top 0.2s ease-out; /* Smooth movement */
    padding-right: 15px; /* Space for the arrow */
    z-index: 10;
    display: none; /* Hidden by default */
}

/* Arrow shape for pointers */
.pointer-label::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* SP pointer color */
.sp-pointer::after {
    border-left: 8px solid #ef4444; /* border-l-red-500 */
}

/* BP pointer color */
.bp-pointer::after {
    border-left: 8px solid #3b82f6; /* border-l-blue-500 */
}

/* Styles for Off-Screen Pointers */
.pointer-label.offscreen-above,
.pointer-label.offscreen-below {
    opacity: 0.7;
    font-style: italic;
}

/* Heap visualization colors */
.heap-free { background-color: #dcfce7 !important; } /* bg-green-100 */
.heap-used { background-color: #fee2e2 !important; } /* bg-red-100 */

/* Dark mode heap visualization colors */
.dark .heap-free { background-color: #064e3b !important; } /* bg-green-900 */
.dark .heap-used { background-color: #7f1d1d !important; } /* bg-red-900 */

/* Specific styles within heap cells */
.heap-header-value { color: #047857; } /* text-green-700 */
.heap-data-preview { color: #64748b; font-style: italic; } /* text-slate-500 */

/* Code display line styling */
.code-line {
    padding: 0.1rem 0.5rem;
    white-space: pre; /* Preserve whitespace */
    border-radius: 0.125rem; /* rounded-xs */
    transition: background-color 0.2s ease;
    position: relative; /* Needed for breakpoint marker */
    cursor: default; /* Default cursor */
}
/* Add left padding for breakpoint marker */
.code-line .code-address {
    margin-left: 15px;
}

.c-source-line {
    display: flex;
    align-items: stretch;
}

.c-source-gutter {
    display: inline-block;
    width: 3rem;
    margin-right: 0.75rem;
    color: #9ca3af;
    text-align: right;
    font-family: 'Roboto Mono', monospace;
    user-select: none;
}

.c-source-content {
    flex: 1;
    white-space: pre;
    font-family: 'Roboto Mono', monospace;
}


/* Code address part */
.code-address {
    display: inline-block;
    width: 100px; /* Fixed width for alignment */
    color: #9ca3af; /* text-gray-400 */
    margin-right: 1rem; /* mr-4 */
    text-align: right;
}

/* Code label definition line */
.code-label-line {
    padding: 0.2rem 0.5rem;
    white-space: pre;
    font-weight: 600; /* font-semibold */
    color: #4b5563; /* text-gray-600 */
    margin-top: 0.25rem; /* mt-1 */
}

/* Code instruction/data text part */
.code-text {
    /* Takes remaining space */
}

/* Highlighted active code line (EIP) */
.code-line-active {
    background-color: #bfdbfe; /* bg-blue-200 for stronger contrast */
    font-weight: 600; /* font-semibold */
}

.token.keyword { color: #2563eb; font-weight: 600; }
.token.number { color: #b45309; }
.token.string { color: #16a34a; }
.token.comment { color: #6b7280; font-style: italic; }
.token.operator { color: #0f172a; }
.token.directive { color: #7c3aed; }
.token.constant { color: #0ea5e9; }

.dark .token.keyword { color: #60a5fa; }
.dark .token.number { color: #fbbf24; }
.dark .token.string { color: #34d399; }
.dark .token.comment { color: #9ca3af; font-style: italic; }
.dark .token.operator { color: #e5e7eb; }
.dark .token.directive { color: #c084fc; }
.dark .token.constant { color: #38bdf8; }
.dark .c-source-gutter { color: #6b7280; }

/* Breakpoint marker style */
.breakpoint-marker {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background-color: #dc2626; /* bg-red-600 */
    border-radius: 50%;
    display: none; /* Hidden by default */
}
/* Show marker when breakpoint is active */
.code-line.breakpoint-active .breakpoint-marker {
    display: block;
}


/* Style for .text/.data section directives */
.code-section-directive {
    padding: 0.2rem 0.5rem;
    white-space: pre;
    font-weight: bold;
    color: #6d28d9; /* text-purple-700 */
    margin-top: 0.5rem; /* mt-2 */
    margin-bottom: 0.2rem; /* mb-1 */
}

/* Message box (modal) overlay */
#messageBox {
    transition: opacity 0.3s ease-in-out;
}

/* Message box content scaling */
#messageBox > div {
    transition: transform 0.3s ease-in-out;
}

/* Hidden state for message box */
#messageBox.hidden {
    opacity: 0;
    pointer-events: none;
}

#messageBox.hidden > div {
    transform: scale(0.95);
}

/* Limit height and enable scrolling for message box content */
#messageText {
    max-height: 60vh; /* Limit height to 60% of viewport height */
    overflow-y: auto; /* Enable vertical scrollbar if content overflows */
}

/* Preformatted text within message box (for heap dump, hex view etc.) */
#messageText pre {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem; /* text-xs */
    line-height: 1.25;
    background-color: #f3f4f6; /* bg-gray-100 */
    padding: 0.5rem; /* p-2 */
    border-radius: 0.25rem; /* rounded-sm */
    max-height: 300px; /* Keep existing max-height */
    overflow-y: auto; /* Keep existing vertical scroll */
    white-space: pre; /* Ensure whitespace is preserved, prevent wrapping */
    overflow-x: auto; /* Add horizontal scroll for long lines */
}

/* Styling for help content inside code display */
#codeDisplay .help-content h3 {
    font-size: 1.1em;
    font-weight: 600; /* font-semibold */
    margin-top: 1em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #ccc;
}

#codeDisplay .help-content ul {
    list-style: disc;
    margin-left: 2em;
}

#codeDisplay .help-content code {
    background-color: #e5e7eb; /* bg-gray-200 */
    padding: 0.1em 0.3em;
    border-radius: 0.25em;
    font-size: 0.9em;
}

/* Style for the address cell containing the SP marker */
.addr-is-sp {
    color: #ef4444 !important; /* Red text (like side pointer) */
    font-weight: bold;
}

/* Style for the address cell containing the BP marker */
.addr-is-bp {
    color: #3b82f6 !important; /* Blue text (like side pointer) */
    font-weight: bold;
}

/* --- Memory Map Visualization Styles --- */

#memoryMapVisualization {
    padding: 0;
    background-color: #f8fafc; /* Light gray background */
    display: flex;
    flex-direction: column; /* Render top-to-bottom (high to low address) */
    overflow: hidden; /* Prevent internal borders from showing outside */
    /* height: 100%; */ /* Removed height: 100% to rely on flex-grow */
    position: relative; /* Needed for absolute positioning of the cursor */
}

.memory-segment {
    width: 100%;
    border-top: 1px solid #e2e8f0; /* Lighter border between segments */
    display: flex;
    flex-direction: column; /* Allow sub-segments to stack */
    align-items: center; /* Center label horizontally */
    justify-content: center; /* Center label vertically */
    text-align: center;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    /* flex-grow and height/flex-basis are set dynamically in JS */
}

/* Remove top border from the first child (highest address segment) */
.memory-segment:first-child {
     border-top: none;
}

.segment-label {
    padding: 2px 5px;
    font-size: 0.7rem;
    line-height: 1.1;
    white-space: pre-wrap; /* Allow wrapping */
    font-weight: 500;
    color: #334155; /* Darker slate text */
    /* Position label absolutely to overlay sub-segments */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1; /* Ensure label is above sub-segments */
    /* Add a subtle background for readability over busy sub-segments */
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 3px;
    pointer-events: none; /* Allow clicking through label to segment */
}

/* Specific styling for labels in fixed-height segments */
.fixed-height-segment .segment-label {
    /* Ensure label fits in small height */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%; /* Prevent label overflowing segment */
    background-color: transparent; /* No background needed if no sub-segments */
}
.fixed-height-segment .segment-label br {
    display: none; /* Hide line breaks in fixed height */
}


/* Segment specific colors (Base color for the segment container) */
.segment-reserved { background-color: #e2e8f0; } /* Slate 200 */
.segment-code { background-color: #dbeafe; } /* Blue 100 */
.segment-data { background-color: #fef9c3; } /* Yellow 100 */
.segment-heap { background-color: #f0fdf4; } /* Lighter Green 50 */
.segment-sharedlibs { background-color: #ede9fe; } /* Violet 100 */
.segment-stack { /* Background set dynamically by gradient */ }
.segment-unused { background-color: #f1f5f9; } /* Slate 100 */
.segment-kernel { background-color: #e2e8f0; } /* Slate 200 */

/* Adjust label colors for better contrast on certain backgrounds */
.segment-unused .segment-label,
.segment-kernel .segment-label,
.segment-reserved .segment-label {
    color: #64748b; /* Slate 500 */
}
.segment-sharedlibs .segment-label {
    color: #5b21b6; /* Violet 700 */
}


/* --- Sub-Segment Styles (for Heap/Stack Usage) --- */
.memory-sub-segment {
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0; /* Prevent shrinking */
    /* Add a very subtle inner border to distinguish sub-segments */
    border-top: 1px dotted rgba(0, 0, 0, 0.05); /* Changed to top border */
}
/* Remove top border from first sub-segment within a segment */
.memory-segment > .memory-sub-segment:first-child {
    border-top: none;
}


/* Colors for sub-segments */
.sub-segment-heap-used { background-color: #bbf7d0; } /* Darker Green 200 */
.sub-segment-heap-free { background-color: #f0fdf4; } /* Base Green 50 (same as segment) */
.sub-segment-heap-unused { background-color: #f0fdf4; } /* Base Green 50 */
/* Stack sub-segments removed, using gradient now */
.sub-segment-error { background-color: #fecaca; } /* Red 200 */

/* --- Stack View Cursor in Memory Map --- */
#stackViewCursor {
    position: absolute;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 255, 0.1); /* Semi-transparent blue */
    border: 1px dashed rgba(0, 0, 200, 0.4);
    box-sizing: border-box;
    z-index: 2; /* Above segment label, below tooltips? */
    pointer-events: none; /* Initially not interactive */
    transition: top 0.1s linear, height 0.1s linear; /* Smooth transitions */
    display: none; /* Hidden until first render */
}


/* --- END Memory Map Styles --- */

/* --- Assembler Overlay Styles --- */

/* Similar to Help Overlay */
#assemblerOverlay {
    transition: opacity 0.3s ease-in-out;
}

#assemblerOverlay > div { /* The inner container */
    transition: transform 0.3s ease-in-out;
}

/* Hidden state for assembler overlay */
#assemblerOverlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#assemblerOverlay.hidden > div {
    transform: scale(0.95);
}

/* Ensure textarea and output divs have appropriate styling */
#assemblerOverlay textarea {
    min-height: 100px; /* Ensure a decent minimum height */
}

#assemblerOverlay #opcodesHexOutput,
#assemblerOverlay #opcodesStringOutput {
    white-space: pre-wrap; /* Allow wrapping of long hex strings */
    word-break: break-all; /* Break long words/strings */
    min-height: 60px; /* Ensure some space even when empty */
}

/* --- END Assembler Overlay Styles --- */


/* --- Disassembler Overlay Styles --- */

/* Similar to Help/Assembler Overlay */
#disassemblerOverlay {
    transition: opacity 0.3s ease-in-out;
}

#disassemblerOverlay > div { /* The inner container */
    transition: transform 0.3s ease-in-out;
}

/* Hidden state for disassembler overlay */
#disassemblerOverlay.hidden {
    opacity: 0;
    pointer-events: none;
}

#disassemblerOverlay.hidden > div {
    transform: scale(0.95);
}

/* Ensure textarea and output divs have appropriate styling */
#disassemblerOverlay textarea {
    min-height: 100px; /* Ensure a decent minimum height */
}

#disassemblerOverlay #assemblyOutput {
    white-space: pre-wrap; /* Allow wrapping of long assembly lines */
    word-break: break-all; /* Break long words/strings if needed */
    min-height: 100px; /* Ensure some space even when empty */
}

/* --- END Disassembler Overlay Styles --- */

/* --- Stack Popup Styles --- */

/* Popup container - uses Tailwind classes in HTML for positioning/base */
#stackPopup {
    /* Base styles are in HTML via Tailwind */
    /* Add specific non-Tailwind styles if needed */
}

/* Content area within the popup */
#stackPopupContent {
    /* Base styles in HTML */
    /* Add styles for the stack visualization inside the popup if needed */
    /* For example, similar to .memory-cell but maybe simplified */
    font-family: 'Roboto Mono', monospace;
    font-size: 0.75rem; /* text-xs */
    overflow-y: auto; /* Allow scrolling if content exceeds height */
}

/* Draggable line/handle */
#stackPopupDragger {
    /* Base styles in HTML */
    /* Ensure it's visible and interactive */
    z-index: 10; /* Above content */
}

/* --- END Stack Popup Styles --- */


/* --- Stack Popup Styles (Moved from popout.js) --- */
#stackPopup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px; /* Adjust width as needed */
    height: 400px; /* Adjust height as needed */
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 60; /* Ensure it's above messageBox */
    /* display: flex; <-- REMOVED from base ID selector */
    flex-direction: column;
    border-radius: 0.375rem; /* rounded-md */
    overflow: hidden; /* Prevent content bleed */
    /* 'hidden' class (sets display: none) is toggled by JS */
}
/* Apply flex display only when NOT hidden */
#stackPopup:not(.hidden) {
    display: flex;
}
#stackPopupHeader {
    padding: 0.5rem; /* p-2 */
    background-color: #f3f4f6; /* bg-gray-100 */
    border-bottom: 1px solid #e5e7eb; /* border-gray-200 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: default; /* Usually header isn't draggable */
    flex-shrink: 0;
}
#stackPopupTitle {
    font-weight: 600; /* font-semibold */
    font-size: 0.875rem; /* text-sm */
    color: #374151; /* text-gray-700 */
}
#closeStackPopupButton {
    background: none;
    border: none;
    font-size: 1rem; /* text-lg */
    font-weight: bold;
    color: #6b7280; /* text-gray-500 */
    cursor: pointer;
    padding: 0 0.25rem; /* px-1 */
}
#closeStackPopupButton:hover {
    color: #1f2937; /* text-gray-800 */
}
#stackPopupContent {
    flex-grow: 1;
    padding: 0.5rem; /* p-2 */
    overflow-y: auto; /* Allow scrolling if content overflows */
    position: relative; /* Needed for absolute positioning of dragger/markers */
    background-color: #eef2ff; /* bg-indigo-50 - Match map segment */
    font-family: 'Roboto Mono', monospace; /* Added for consistency */
    font-size: 0.75rem; /* text-xs */ /* Added for consistency */
}
#stackPopupDragger {
    position: absolute;
    left: 0;
    width: 100%;
    height: 10px; /* Adjust height */
    background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    cursor: ns-resize;
    z-index: 10; /* Ensure dragger is above content but below header/markers */
    /* Top position is set dynamically by JS */
}
/* --- End Stack Popup Styles (Moved) --- */

/* Dark mode styles */
.dark .panel-base {
    background-color: #1f2937; /* bg-gray-800 */
    border-color: #374151; /* border-gray-700 */
}

.dark .code-display-panel {
    background-color: #1f2937; /* bg-gray-800 */
}

.dark .terminal-panel {
    background-color: #111827; /* bg-gray-900 */
    border-color: #1f2937; /* border-gray-800 */
}

.dark .debug-terminal-output {
    background-color: #111827; /* bg-gray-900 */
    color: #e5e7eb; /* text-gray-200 */
    border-color: #374151; /* border-gray-700 */
}

.dark .debug-terminal-output .cmd-echo {
    color: #9ca3af; /* text-gray-400 */
}

.dark .debug-terminal-input {
    background-color: #1f2937; /* bg-gray-800 */
    color: #e5e7eb; /* text-gray-200 */
    border-color: #4b5563; /* border-gray-600 */
}

.dark .tab-container {
    border-color: #374151; /* border-gray-700 */
}

.dark .tab-button {
    background-color: #374151; /* bg-gray-700 */
    color: #e5e7eb; /* text-gray-200 */
}

.dark .tab-button.active {
    background-color: #1f2937; /* bg-gray-800 */
    border-color: #374151; /* border-gray-700 */
    border-bottom-color: #1f2937; /* Match panel background */
}

.dark .tab-close-button {
    color: #6b7280; /* text-gray-500 */
}

.dark .tab-close-button:hover {
    color: #e5e7eb; /* text-gray-200 */
}

.dark .register-item {
    background-color: #111827; /* bg-gray-900 */
    border-color: #374151; /* border-gray-700 */
}

.dark .register-name {
    color: #9ca3af; /* text-gray-400 */
}

.dark .register-value {
    color: #e5e7eb; /* text-gray-200 */
}

.dark .memory-cell {
    background-color: #374151; /* bg-gray-700 - default for unclassified cells */
    border-color: #4b5563; /* border-gray-600 */
    color: #e5e7eb; /* text-gray-200 */
}

.dark #heapVisualization .memory-cell:hover {
    background-color: #1e3a8a; /* bg-blue-900 */
}

.dark .memory-addr {
    color: #9ca3af; /* text-gray-400 */
    background-color: #111827; /* bg-gray-900 */
    border-color: #4b5563; /* border-gray-600 */
}

.dark .memory-value {
    color: #e5e7eb; /* text-gray-200 */
}

/* Specific dark mode styles for heap data preview */
.dark .heap-data-preview {
    color: #d1d5db; /* text-gray-300 - better contrast */
}

/* Dark mode heap header text */
.dark .heap-header-value {
    color: #e5e7eb; /* text-gray-200 - much better contrast */
}

.dark .memory-label {
    color: #d1d5db; /* text-gray-300 */
    background-color: #111827; /* bg-gray-900 */
    border-color: #4b5563; /* border-gray-600 */
}

/* Dark mode stack cell colors */
.dark .cell-argument { background-color: #164e63; } /* bg-cyan-900 */
.dark .cell-ret_addr { background-color: #581c87; } /* bg-purple-900 - better than orange/yellow */
.dark .cell-saved_bp { background-color: #6b21a8; font-weight: bold; } /* bg-purple-800 - more visible purple */
.dark .cell-local { background-color: #312e81; } /* bg-indigo-900 */
.dark .cell-buffer { background-color: #1e3a8a; } /* bg-blue-900 */
.dark .cell-padding { background-color: #111827; } /* bg-gray-900 */
.dark .cell-other { background-color: #374151; } /* bg-gray-700 - changed from gray-800 */
.dark .cell-canary { background-color: #064e3b; border-color: #10b981; } /* bg-green-900 */
.dark .cell-canary-corrupted { background-color: #7f1d1d; border-color: #ef4444; } /* bg-red-900 */

/* Dark mode code display */
.dark .code-line {
    color: #e5e7eb; /* text-gray-200 */
}

.dark .code-address {
    color: #6b7280; /* text-gray-500 */
}

.dark .code-label-line {
    color: #d1d5db; /* text-gray-300 */
}

.dark .code-line-active {
    background-color: rgba(59, 130, 246, 0.28); /* blue-500 with transparency */
    box-shadow: inset 0 0 0 1px #60a5fa; /* subtle outline for visibility */
    font-weight: 700; /* stronger emphasis in dark mode */
}

.dark .code-section-directive {
    color: #c084fc; /* text-purple-400 */
}

/* Dark mode help content */
.dark #codeDisplay .help-content h3 {
    border-color: #4b5563; /* border-gray-600 */
}

.dark #codeDisplay .help-content code {
    background-color: #374151; /* bg-gray-700 */
    color: #e5e7eb; /* text-gray-200 */
}

/* Dark mode memory map */
.dark #memoryMapVisualization {
    background-color: #111827; /* bg-gray-900 */
}

.dark .memory-segment {
    border-color: #374151; /* border-gray-700 */
}

.dark .segment-label {
    color: #e5e7eb; /* text-gray-200 */
    background-color: rgba(17, 24, 39, 0.8); /* Dark semi-transparent */
}

/* Dark mode segment colors */
.dark .segment-reserved { background-color: #374151; } /* Gray 700 */
.dark .segment-code { background-color: #1e3a8a; } /* Blue 900 */
.dark .segment-data { background-color: #134e4a; } /* Teal 900 - different from shared libs */
.dark .segment-heap { background-color: #14532d; } /* Green 900 */
.dark .segment-sharedlibs { background-color: #4c1d95; } /* Violet 900 */
.dark .segment-unused { background-color: #1f2937; } /* Gray 800 */
.dark .segment-kernel { background-color: #374151; } /* Gray 700 */

/* Dark mode sub-segments */
.dark .sub-segment-heap-used { background-color: #166534; } /* Green 800 */
.dark .sub-segment-heap-free { background-color: #14532d; } /* Green 900 */
.dark .sub-segment-heap-unused { background-color: #14532d; } /* Green 900 */
.dark .sub-segment-error { background-color: #991b1b; } /* Red 800 */

/* Dark mode message box */
.dark #messageText pre {
    background-color: #111827; /* bg-gray-900 */
    color: #e5e7eb; /* text-gray-200 */
}

/* Dark mode overlays */
.dark #helpOverlay > div,
.dark #assemblerOverlay > div,
.dark #disassemblerOverlay > div,
.dark #ropFinderOverlay > div,
.dark #scriptOverlay > div {
    background-color: #1f2937; /* bg-gray-800 */
}

.dark #helpOverlay h2,
.dark #assemblerOverlay h2,
.dark #disassemblerOverlay h2,
.dark #ropFinderOverlay h2,
.dark #scriptOverlay h2 {
    color: #e5e7eb; /* text-gray-200 */
}

.dark #helpOverlay label,
.dark #assemblerOverlay label,
.dark #disassemblerOverlay label,
.dark #ropFinderOverlay label,
.dark #scriptOverlay label {
    color: #d1d5db; /* text-gray-300 */
}

.dark #helpOverlay textarea,
.dark #assemblerOverlay textarea,
.dark #disassemblerOverlay textarea,
.dark #ropFinderOverlay input[type="text"],
.dark #ropFinderOverlay input[type="number"],
.dark #scriptOverlay textarea {
    background-color: #111827; /* bg-gray-900 */
    color: #e5e7eb; /* text-gray-200 */
    border-color: #4b5563; /* border-gray-600 */
}

.dark #opcodesHexOutput,
.dark #opcodesStringOutput,
.dark #assemblyOutput,
.dark #ropGadgetResults {
    background-color: #111827; /* bg-gray-900 */
    color: #e5e7eb; /* text-gray-200 */
    border-color: #4b5563; /* border-gray-600 */
}

.dark #disassemblerErrorOutput {
    background-color: #7f1d1d; /* bg-red-900 */
    border-color: #991b1b; /* border-red-800 */
    color: #fecaca; /* text-red-200 */
}

/* Dark mode stack popup */
.dark #stackPopup {
    background-color: #1f2937; /* bg-gray-800 */
    border-color: #4b5563; /* border-gray-600 */
}

.dark #stackPopupHeader {
    background-color: #111827; /* bg-gray-900 */
    border-color: #374151; /* border-gray-700 */
}

.dark #stackPopupTitle {
    color: #e5e7eb; /* text-gray-200 */
}

.dark #closeStackPopupButton {
    color: #9ca3af; /* text-gray-400 */
}

.dark #closeStackPopupButton:hover {
    color: #e5e7eb; /* text-gray-200 */
}

.dark #stackPopupContent {
    background-color: #1e3a8a; /* bg-blue-900 */
}

/* Dark mode table headers in overlays */
.dark .bg-gray-100 {
    background-color: #374151 !important; /* bg-gray-700 */
    color: #e5e7eb !important; /* text-gray-200 */
}

.dark th {
    color: #e5e7eb; /* text-gray-200 */
    border-color: #4b5563; /* border-gray-600 */
}

.dark td {
    color: #e5e7eb; /* text-gray-200 */
    border-color: #4b5563; /* border-gray-600 */
}

/* Dark mode help content text colors */
.dark .help-content {
    color: #e5e7eb; /* text-gray-200 */
}

.dark .help-content h2 {
    color: #f3f4f6; /* text-gray-100 */
}

.dark .help-content h3 {
    color: #e5e7eb; /* text-gray-200 */
    border-color: #4b5563; /* border-gray-600 */
}

.dark .help-content h4 {
    color: #e5e7eb; /* text-gray-200 */
}

.dark .help-content h5 {
    color: #d1d5db; /* text-gray-300 */
}

.dark .help-content p,
.dark .help-content li {
    color: #d1d5db; /* text-gray-300 */
}

.dark .help-content b {
    color: #f3f4f6; /* text-gray-100 */
}

.dark .help-content code {
    background-color: transparent; /* Remove background */
    color: #60a5fa; /* text-blue-400 - nice blue color for code */
    font-weight: 500; /* Medium weight for better readability */
}

.dark .help-content pre {
    background-color: #111827; /* bg-gray-900 */
    border-color: #374151; /* border-gray-700 */
    color: #e5e7eb; /* text-gray-200 */
}

/* Dark mode specific text color classes */
.dark .text-gray-800 { color: #e5e7eb !important; }
.dark .text-slate-700 { color: #e5e7eb !important; }
.dark .text-slate-600 { color: #d1d5db !important; }
.dark .text-slate-500 { color: #9ca3af !important; }
.dark .text-gray-600 { color: #d1d5db !important; }
.dark .text-gray-500 { color: #9ca3af !important; }
.dark .text-red-600 { color: #f87171 !important; }

/* Dark mode for help content backgrounds */
.dark .bg-gray-50 { 
    background-color: #111827 !important; /* bg-gray-900 */
}

.dark .border-gray-200 {
    border-color: #374151 !important; /* border-gray-700 */
}