/*B"H*/

/* --- THEME & VARIABLES (VIVID X - EXTREME NEON EDITION v2) --- */
    :root {
    --font-ui: 'Inter', sans-serif;
    --font-code: 'Fira Code', monospace;
    --timing-fast: 0.15s;
    --timing-med: 0.3s;
    --radius-sm: 4px;
    --radius-md: 8px;
    --shadow-color: rgba(0, 0, 0, 0.6);

    /* --- NEW EXTREME COLOR PALETTE --- */
    --neon-cyan: #00f6ff;
    --neon-magenta: #ff00ff;
    --neon-lime: #a8ff00;
    
    --glow-cyan: rgba(0, 246, 255, 0.5);
    --glow-magenta: rgba(255, 0, 255, 0.4);
    --glow-lime: rgba(168, 255, 0, 0.6);

    /* B"H - SERIOUSLY BRIGHTER BACKGROUNDS, NO MORE JOKES */
    --color-bg-deep: #191c29;      /* Was #02040a */
    --color-bg-primary: #000000;   /* Was #0a0c14 */
    --color-bg-secondary: #383e5e; /* Was #121522 */
    --color-bg-tertiary: #505886;  /* Was #22273d */
    --color-border: #626AAE;       /* Was #2a2f4a */
    --color-border-accent: var(--neon-cyan);
    
    --color-bg-accent-translucent: rgba(0, 149, 255, 0.15); 
    
    /* B"H - BRIGHTER TEXT & ICONS */
    --color-text-primary: #ffffff; 
    --color-text-secondary: #d1d9ff; /* Was #c0d0ff */
    --color-text-tertiary: #a0a8d0;   /* Was #5f6b8a - HUGE JUMP FOR ICONS */
    
    --color-accent-primary: var(--neon-cyan); 
    --color-accent-secondary: var(--neon-lime); 
    --color-accent-danger: #f75d65;
    --color-backdrop: rgba(26, 29, 46, 0.6); /* Matched to new bg */
}


    
    
    /* --- BASE & LAYOUT --- */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { 
        height: 100%; margin: 0; font-family: var(--font-ui); 
        background-color: var(--color-bg-deep); color: var(--color-text-primary); 
        overflow: hidden; -webkit-font-smoothing: antialiased; font-synthesis: none;
        font-size: 16px;
    }
    body {
         background-color: #000;
         background-image: var(--neon-cyan) 1px, transparent 1px);
         background-size: 40px 40px;
         background-position: -1px -1px;
         animation: bg-flicker 10s infinite linear;
    }
    @keyframes bg-flicker {
        0%, 100% { background-color: rgba(2, 4, 10, 0.9); }
        50% { background-color: rgba(10, 12, 20, 0.95); }
    }
    .app-container { 
        display: grid; grid-template-rows: auto 1fr auto; 
        grid-template-columns: 300px 1fr;
         height: 100vh; height: 100dvh; 
        background-color: var(--color-bg-primary); 
        opacity: 0; animation: appFadeIn 0.5s ease forwards;
    }
    
    
    /* B"H - DESKTOP SIDEBAR COLLAPSE LOGIC */

	
	
	.app-container.sidebar-collapsed {
	    grid-template-columns: 0 1fr !important;
	}
	.app-container.sidebar-collapsed .sidebar-resizer {
	    display: none;
	}
	
	.app-container.sidebar-collapsed .sidebar {
	    border-right-width: 0;
	    overflow: hidden; /* Prevents content from showing during transition */
	}
    @keyframes appFadeIn { to { opacity: 1; } }

    .top-panel {
    grid-row: 1 / 2;
    grid-column: 2 / 3; /* CHANGED FROM 1 / 3 */
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-secondary);
    border-bottom: 2px solid var(--color-border);
    z-index: 300;
    overflow-y: visible; 
    overflow-x: hidden;
}
    


.menu-bar { 
    display: flex; 
    align-items: center; 
    height: 52px; 
    padding: 0 12px; 
    flex-shrink: 0; 
    gap: 8px;
    
    /* --- ADD THESE TWO LINES --- */
    position: relative; /* Makes this the positioning anchor for the dropdown */
    z-index: 1;         /* Establishes a stacking context above the tab bar */
}
    
    .tab-bar { display: flex; overflow-x: auto; align-items: flex-end; }
    
    .main-content { 
        grid-row: 2 / 3; grid-column: 2 / 3; position: relative; 
        display: flex; flex-direction: column; 
        overflow: hidden; 
    }
    
    
    
    .editor-area { 
        flex-grow: 1; /* B"H - CRITICAL: This tells the editor to take up all available vertical space */
        display: flex; 
        position: relative; 
        overflow-y: auto; /* B"H - CRITICAL: This enables vertical scrolling ONLY within this area */
        background-color: transparent; 
    }
    
    
    .status-bar { 
        grid-row: 3 / 4; 
        grid-column: 2 / 3; 
        height: 28px; 
        background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
        color: var(--color-bg-deep); 
        display: flex; align-items: center; justify-content: space-between; 
        padding: 0 16px; font-size: 0.9em; font-weight: 700; user-select: none; z-index: 100;
        
        letter-spacing: 1px;
    }
    
    /* --- SIDEBAR & VISUAL AUDIO GUIDE EXPLORER --- */
    .sidebar { 
    grid-row: 1 / 4; grid-column: 1 / 2;
    /* B"H - Replaced the flat dark color with a subtle vertical gradient for more depth! */
    background:  #191d30;
    
    
    display: flex; flex-direction: column; 
    border-right: 2px solid var(--color-border);
    transition: transform var(--timing-med) ease, width var(--timing-med) ease; flex-shrink: 0;
    position: relative;
    z-index: 3200;
    overflow: hidden;
    

}
    .sidebar-header { 
        display: flex; justify-content: space-between; align-items: center; 
        padding: 0 8px 0 16px; height: 52px; 
        border-bottom: 2px solid var(--color-border); 
        flex-shrink: 0;  font-size: 0.9em; letter-spacing: 2px; user-select: none; font-weight: 700;
        color: var(--neon-cyan);
        
    
    }
    .workspaces-container { 
    flex-grow: 1; overflow-y: auto; padding: 8px;
    overflow-x: auto; /* ADD THIS LINE */
}
    
    /* --- NEW VERTICAL HIERARCHY STYLES --- */
    .workspace-header { 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 12px; font-weight: 700; cursor: pointer; user-select: none; 
    border-radius: var(--radius-sm); transition: all var(--timing-fast);
    position: relative; overflow: hidden;
    
    letter-spacing: 1px;
    /* B"H - Made the background a brighter and more saturated blue/purple */
    background-color: #252a4a;
    /* B"H - Gave it a vivid cyan border and a subtle inner glow! */
    border: 1px solid rgba(0, 246, 255, 0.4);
    
     margin-bottom: 8px; /* Space between workspaces */
    /* --- BRIGHTER WORKSPACE HEADER --- */
    color: var(--color-text-secondary);
}
    .workspace-header:hover { 
        background-color: var(--color-border); 
        color: var(--neon-cyan);
        border-color: var(--neon-cyan);
        
    }
    
    .tree-item {
        display: flex;
        flex-direction: column; /* Children (UL) will stack below the name-wrap */
        align-items: stretch;
        position: relative;
        user-select: none;
    }
    .tree-item-name-wrap {
        display: flex; align-items: center; flex-grow: 1;
        min-height: 40px;
        cursor: pointer;
        padding: 6px 8px;
        border-radius: var(--radius-sm);
        transition: background-color var(--timing-fast);
    }
    
    /* --- INSANE BRIGHTNESS & GLOW ON HOVER --- */
    .tree-item > .tree-item-name-wrap:hover {
        background-color: var(--color-bg-tertiary);
    }
    .tree-item > .tree-item-name-wrap:hover .tree-item-name {
        color: var(--neon-lime);
        
        
            transform: scale(1.02);
    }
    .tree-item.context-active > .tree-item-name-wrap .tree-item-name {
        color: var(--neon-magenta);
        
    
      }

    .tree-item-arrow { 
        width: 20px; text-align: center; display: inline-block; 
        transition: transform var(--timing-fast) ease; user-select: none; 
        color: var(--color-text-tertiary);
        font-size: 1.2em;
    }
    .tree-item.expanded > .tree-item-name-wrap > .tree-item-arrow { transform: rotate(90deg); }
    
    .tree-item-name { 
        margin-left: 4px; 
        white-space: nowrap; 
         
        
        
        font-size: 0.95em;
        /* --- BRIGHTER FILE NAMES BY DEFAULT --- */
        font-weight: 600;
        color: var(--color-text-primary);
        transition: all var(--timing-fast) ease;
    }

    /* This is the key for the new layout */
    .tree-item > ul {
    margin: 4px 0 4px 20px;
    padding-left: 15px;
    border-left: 1px solid var(--color-border);
    list-style: none;
    min-width: max-content; /* ADD THIS LINE */
}
    .tree-item > ul:hover {
        border-left-color: var(--neon-cyan);
    }


    /* --- TABS --- */
    .tab-bar::-webkit-scrollbar { height: 4px; } 
    .tab-bar::-webkit-scrollbar-thumb { background: var(--color-border-accent); border-radius: 4px; }
    .tab { 
        display: inline-flex; align-items: center; padding: 0 16px;
        min-height: 48px; max-width: 240px; 
        border-top: 4px solid transparent;
        border-right: 1px solid var(--color-border); 
        cursor: pointer; position: relative;
        color: var(--color-text-secondary); 
        background:  var(--color-bg-primary);
        transition: all var(--timing-fast) ease; 
    }
    .tab:hover { 
        background-color: var(--color-bg-primary); 
        color: var(--color-text-primary); 
        
    
      }
    .tab.active { 
        background-color: var(--color-bg-primary); 
        border-top-color: var(--color-border-accent); 
        color: var(--color-text-primary); 
        font-weight: 700;
        
         
     }
   
     .tab.dirty .tab-name::after { content: ' ●'; color: var(--neon-magenta); font-size: 0.9em; }
    .tab-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; padding-right: 24px; }
    .close-tab-btn { 
        position: absolute;
         right: 8px; 
         top: 50%; 
         transform: translateY(-50%);
        border-radius: var(--radius-sm); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
    }
    .close-tab-btn:hover {
     background-color: var(--color-bg-tertiary); 
     color: var(--neon-magenta); 
     }

    /* --- EDITOR --- */
    #editor-wrapper { display: flex; flex-grow: 1; height: 100%; position: relative; }
    #line-numbers { 
        font-family: var(--font-code); padding: 16px 8px; font-size: 1em; line-height: 1.7; 
        color: var(--color-text-tertiary); text-align: right; user-select: none; 
        background-color: transparent; border-right: 1px solid var(--color-border);
       
         overflow-y: hidden; white-space: pre; 
    }
    #editor { 
        flex-grow: 1; height: 100%; border: none; background: transparent; color: var(--color-text-primary); 
        font-family: var(--font-code); font-size: 1em; line-height: 1.7; 
        padding: 16px; resize: none; outline: none; white-space: pre; overflow: auto;
    }
    .empty-editor-message { 
        position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); 
        color: var(--color-text-secondary); text-align: center; user-select: none; opacity: 0.6; padding: 16px;
        letter-spacing: 4px;
    }
    
    /* --- OVERLAYS & DIALOGS --- */
    .hidden { display: none !important; } 
    .visible { display: flex !important; }
    .svg-icon { width: 1.25em; height: 1.25em; fill: currentColor; vertical-align: middle; }
    .dialog-overlay { 
        display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
        background-color: rgba(2, 4, 10, 0.7); z-index: 2000; justify-content: center; align-items: center; 
        backdrop-filter: blur(10px) saturate(150%); animation: fadeIn var(--timing-fast) ease; 
    }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    .dialog-content { 
        background-color: var(--color-bg-secondary); 
        border: 2px solid var(--color-border-accent); 
        border-radius: var(--radius-md); padding: 30px; width: 90%; max-width: 500px; 
        display: flex; flex-direction: column; gap: 15px; 
     
        
        
        transform: scale(0.95); animation: scaleUp var(--timing-med) cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    }
    @keyframes scaleUp { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
    #context-menu, #main-menu { 
        position: fixed; z-index: 10000; background-color: var(--color-backdrop); 
        border: 1px solid var(--color-border); backdrop-filter: blur(15px); border-radius: var(--radius-md); 
        padding: 8px; min-width: 260px; display: none; 
        
	overflow-y: scroll;
	max-height: 400px;
        transform-origin: top left; animation: scaleUp var(--timing-fast) ease forwards;
    }
    #loading-overlay { 
        position: fixed; 
        top: 0; left: 0;
         width: 100%; 
         height: 100%; 
         background: rgba(0,0,0,0.7); 
        z-index: 9999; 
        display: none; 
        justify-content: center; 
        align-items: center; 
        color: var(--neon-cyan); 
        font-size: 1.5em;
         backdrop-filter: blur(5px); 
         
        text-wrap:pre-wrap;
        letter-spacing: 2px;
        word-break:break-word;
    }
    .toast-container { 
        position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10001; 
        display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none;
    }
    .toast { 
        color: white; padding: 14px 22px; border-radius: var(--radius-md); opacity: 0; 
        transform: translateY(20px); transition: all var(--timing-med) ease; box-shadow: 0 5px 20px var(--shadow-color); 
        font-weight: 600; text-align: center; backdrop-filter: blur(10px);
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast.error { background-color: rgba(247, 93, 101, 0.8); border: 1px solid var(--color-accent-danger); box-shadow: 0 0 15px rgba(247, 93, 101, 0.6); } 
    .toast.success { background-color: rgba(168, 255, 0, 0.8); border: 1px solid var(--neon-lime); color: var(--color-bg-deep); box-shadow: 0 0 15px rgba(168, 255, 0, 0.6);} 
    .toast.info { background-color: rgba(0, 246, 255, 0.8); border: 1px solid var(--neon-cyan); color: var(--color-bg-deep); box-shadow: 0 0 15px var(--glow-cyan);}
    
    /* --- BUTTONS & INPUTS --- */
    button, .button { font-family: var(--font-ui); cursor: pointer; border: none; transition: all var(--timing-fast) ease; user-select: none; }
    .icon-button { 
        background: none; color: var(--color-text-secondary); font-size: 1.2em;
        line-height: 1; vertical-align: middle; padding: 10px; border-radius: var(--radius-md); 
        width: 44px; height: 44px; display: inline-flex; justify-content: center; align-items: center;
    }
    .icon-button:hover:not(:disabled) { 
        background-color: var(--color-bg-tertiary);
         color: var(--neon-cyan); 
        
         text-shadow: 0 0 8px var(--glow-cyan);
    }
    .primary-btn { 
        background: linear-gradient(45deg, var(--neon-cyan), var(--neon-magenta));
        color: white; border:none; 
        padding: 12px 20px; border-radius: var(--radius-sm); font-weight: bold; min-height: 44px;
        
    
      }
   
    
      .primary-btn:hover:not(:disabled) { 
        filter: brightness(1.2); 
        box-shadow: 0 0 20px -2px var(--glow-magenta); 
        transform: translateY(-2px); 
    }
    .secondary-btn { 
        background-color: transparent; color: var(--color-text-primary); 
        border:1px solid var(--color-border); 
        padding: 12px 20px; border-radius: var(--radius-sm); min-height: 44px;
    }
    .secondary-btn:hover:not(:disabled) { 
        background-color: var(--color-border); 
        border-color: var(--neon-cyan);
        color: var(--neon-cyan);
    }
    .menu-button { 
        display: flex; align-items: center; gap: 12px; width: 100%; background: none; color: var(--color-text-primary); 
        padding: 12px 16px; text-align: left; font-size: 1em; border-radius: var(--radius-sm); min-height: 44px;
    }
    .menu-button:hover:not(:disabled) { 
        background-color: var(--color-accent-primary); 
        color: var(--color-bg-deep); 
        text-shadow: none;
    }
    .menu-separator { border: none; border-top: 1px solid var(--color-border); margin: 8px 0; }
    input[type="text"], input[type="password"], textarea { 
        background: var(--color-bg-deep); border: 1px solid var(--color-border); 
        color: var(--color-text-primary); padding: 12px; border-radius: var(--radius-sm); 
        font-family: var(--font-ui); width: 100%; font-size: 1em;
    }
    input:focus, textarea:focus { 
        outline: none; border-color: var(--color-border-accent);
        box-shadow: 0 0 15px -2px var(--glow-cyan);
    }
    
    #find-replace-panel { 
        position: absolute; top: 12px; right: 12px; z-index: 100; 
        background-color: var(--color-backdrop); 
        border: 1px solid var(--color-border); 
        padding: 12px; border-radius: var(--radius-md); 
        box-shadow: 0 5px 30px var(--shadow-color); 
        width: calc(100% - 24px); max-width: 380px; display: none; 
        grid-template-columns: 1fr; gap: 8px; animation: fadeIn var(--timing-fast); 
        backdrop-filter: blur(10px);
        opacity:0.86;
    }
    .fr-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
    #find-replace-panel .button-group { display: flex; gap: 4px; }
    
    /* --- CUSTOM SCROLLBARS & MOBILE --- */
    ::-webkit-scrollbar { width: 12px; height: 12px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { 
        background-color: var(--color-bg-tertiary); 
        border-radius: 10px; 
        border: 3px solid var(--color-bg-primary); 
    }
    ::-webkit-scrollbar-thumb:hover { 
    background-color: var(--neon-cyan); }
    
    
    
        /* --- KEYBOARD HELPER --- */
    .keyboard-helper {
        display: none; /* Hidden by default */
        flex-shrink: 0;
        background-color: var(--color-bg-deep);
        padding: 6px 8px;
        gap: 6px;
        overflow-x: auto;
        border-bottom: 2px solid var(--color-border);
    }
    /* Add this class with JS to show the bar */
    .keyboard-helper.is-visible {
        display: flex;
    }
    .kh-btn {
        font-family: var(--font-code);
        background-color: var(--color-bg-secondary);
        color: var(--color-text-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 8px 12px;
        font-size: 1.1em;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--timing-fast) ease;
    }
    .kh-btn:hover {
        background-color: var(--color-border);
        color: var(--neon-cyan);
        border-color: var(--neon-cyan);
    }
    .kh-separator {
        border-left: 2px solid var(--color-border);
        margin: 0 4px;
    }
    
    
    
    /* --- B"H - UNIFIED RESPONSIVE STYLES --- */
	@media (max-width: 768px) {
	    
	
	    .status-bar {
	        font-size: 0.8em;
	    }
	    
	    #sidebar-collapse-btn {
	        display: none; /* We still hide this button on mobile as the main toggle serves its purpose */
	    }
	
	    /* B"H - The .sidebar-resizer no longer has 'display: none', so it will now appear on mobile. */
	}
        
        
    }
    
    




/*
    THIS IS THE CRITICAL FIX:
    Instead of leaving the main elements in column 2, we are now explicitly
    re-assigning them. This removes any ambiguity. When the sidebar is
    collapsed, the main content is told "You now start at grid line 2 and
    end at grid line 3", which perfectly aligns it in the visible 1fr column.
*/
.app-container.sidebar-collapsed > .top-panel,
.app-container.sidebar-collapsed > .main-content,
.app-container.sidebar-collapsed > .status-bar {
    grid-column: 2 / 3; /* This may seem redundant, but it reinforces the correct position */
}




@media (max-width: 768px) {
    /* Hide the new collapse button on mobile to preserve the original UI */
    #sidebar-collapse-btn {
        display: none;
    }
}
    
    
    /* --- B"H - NEW STYLES FOR BINARY FILE PREVIEWER --- */
#previewer {
    flex-grow: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*padding: 24px;*/
    overflow: auto;
    background-color: var(--color-bg-deep); /* A slightly different background */
}

#previewer img,
#previewer video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px var(--shadow-color);
}

#previewer embed {
    width: 100%;
    height: 100%;
    border: none;
}

#previewer .unsupported-message {
    text-align: center;
    color: var(--color-text-secondary);
    border: 2px dashed var(--color-border);
    padding: 40px;
    border-radius: var(--radius-md);
    user-select: none;
}

#previewer .unsupported-message .svg-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 20px;
    opacity: 0.5;
}
    
    
    /* B"H - New rule for the HTML preview iframe */
#previewer iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: #fff; /* This creates the white browser-like background */
}
    
    
    
/* B"H - SELECTION MODE MENU */
.selection-menu-bar {
    position: fixed; /* Stays in place */
    z-index: 1001;  /* Above context menu, below dialogs */
    background-color: var(--color-bg-deep);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px;
    display: none; /* Hidden by default */
    gap: 6px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    align-items: center;
}

.selection-menu-bar.visible {
    display: flex;
}

/* Style for the text part (e.g., "3 items selected") */
.selection-menu-bar .selection-count {
    padding: 0 8px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
/* B"H - Style for a selected item in the tree */
.tree-item.selected > .tree-item-name-wrap {
    background-color: var(--color-bg-accent-translucent);
    border-radius: 4px;
}


/* B"H - DRAGGABLE TABS FEATURE STYLES */

/* 1. Prevent text selection and declare the tab as a draggable item via cursor */
.tab {
    user-select: none; /* The most important rule to fix the user's issue */
    cursor: move;      /* Indicates to the user that this item can be moved */
}

/* 2. Style the tab as it's being dragged */
.tab.dragging {
    opacity: 0.4;
    background: var(--color-bg-tertiary); /* Give it a flat color while dragging */
}

/* 3. Style for the drop indicator (the vertical line) */
.tab.drop-indicator::before {
    content: '';
    position: absolute;
    top: 10%;
    left: -2px; /* Position it on the left edge of the tab */
    width: 4px;
    height: 80%;
    background-color: var(--neon-lime); /* A very bright, visible color */
    border-radius: 2px;
    box-shadow: 0 0 10px var(--glow-lime);
    z-index: 1;
}



/* B"H - Add these styles for the Git integration UI */

/* Positions the Git Actions button in the workspace header */
.workspace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.workspace-header-title {
    flex-grow: 1;
    cursor: pointer;
    /* Add padding for an easier click target */
    padding: 5px; 
    border-radius: 4px;
}
.workspace-header-title:hover {
    background-color: var(--color-bg-hover);
}

/* Styles for the Git Status Dialog */
.git-status-line {
    display: flex;
    justify-content: space-between;
    padding: 6px 2px;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9em;
}
.git-status-line:last-of-type {
    border-bottom: none;
}

.git-status-line .status {
    font-weight: 600;
}

.git-status-line .status.synced { color: var(--color-accent-success); }
.git-status-line .status.behind { color: var(--color-accent-warning); }
.git-status-line .status.ahead { color: var(--color-accent-info); }

.changes-list {
    margin-top: 15px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    padding: 10px;
    border-radius: 4px;
    background: var(--color-bg-secondary);
    font-size: 0.85em;
}
.changes-list ul {
    list-style-type: none;
    padding-left: 5px;
    margin: 5px 0 0 0;
}
.changes-list li {
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.changes-list .tag {
    display: inline-block;
    width: 65px;
    text-align: center;
    font-size: 0.8em;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    color: var(--color-text-inverted, #fff);
    margin-right: 8px;
}
.changes-list .tag.created { background-color: var(--color-accent-success); }
.changes-list .tag.modified { background-color: var(--color-accent-info); }
.changes-list .tag.deleted { background-color: var(--color-accent-danger); }


/* Add this style to your main CSS file for the red delete button */
.menu-button.danger {
    color: var(--color-accent-danger);
}
.menu-button.danger:hover:not(:disabled) {
    background-color: var(--color-accent-danger-translucent);
    color: var(--color-accent-danger-dark);
}


/* B"H - FINAL RESPONSIVE SELECTION MENU STYLES */
/* B"H - VIVID EXTREME RESPONSIVE SELECTION MENU V3 (FINAL) */

/* This is a simple, new class that your JS adds to the button text. */
/* It has no effect on desktop and is used as a target for mobile. */
.menu-button-label {
    margin-left: 8px; /* Adds a bit of space between the icon and text */
}

/* --- THE INSANE VIVID EXTREME MOBILE TRANSFORMATION --- */
/* This block ONLY activates on screens 768px or smaller */
@media (max-width: 768px) {

    /* 1. Transform the main bar into a vertical stack */
    .selection-menu-bar {
        flex-direction: column; /* Stack items vertically */
        
        
        
        
        /* 3. Reforge its appearance for a compact, glowing, vertical presence */
        
        
        background-color: var(--color-backdrop); /* Use your existing glowing backdrop */
        backdrop-filter: blur(10px);
    }

    
    
    
    
    /* 6. Enlarge the buttons to be worthy of a thumb tap */
    .selection-menu-bar .menu-button {
        
        margin: 4px 0;
        gap: 0;
    }
}



/* B"H - ADD THESE STYLES FOR THE DRAGGABLE SIDEBAR RESIZER */

.sidebar-resizer {
    /* Positioning */
    grid-row: 1 / 4; /* Span all three rows (header, content, footer) */
    grid-column: 1 / 2; /* Occupy the same column as the sidebar */
    justify-self: end; /* Stick to the right edge of that column */
    z-index: 3201; /* Ensure it's on top */
    position: relative;

    /* Appearance & Interaction */
    width: 6px; /* The clickable/draggable area */
    cursor: col-resize; /* The horizontal resize cursor */
    background-color: var(--color-border);
    transition: background-color var(--timing-fast);
}

.sidebar-resizer:hover {
    background-color: var(--neon-cyan); /* Highlight on hover */
}

/* This class will be added by JavaScript during the drag to prevent text selection */
body.is-resizing {
    user-select: none;
}

/* Hide the resizer on mobile, as this is a desktop-only feature */
@media (max-width: 768px) {
    .sidebar-resizer {
	    width: 10px; /* Wider for easier touch targeting */
	}
}




.find-input-container {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between input and the 'Aa' button */
    flex-grow: 1; /* Allow the container to fill the space */
}
.find-input-container #find-input {
    flex-grow: 1; /* Make the text input itself fill the container's space */
}

.fr-option {
    display: flex;
    align-items: center;
}
/* We hide the actual checkbox and style the label to look like a button */
.fr-option input[type="checkbox"] {
    display: none;
}
.fr-option label {
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: var(--font-code);
    font-weight: 700;
    user-select: none;
    transition: all var(--timing-fast);
}
.fr-option label:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}
/* This style applies when the hidden checkbox is checked, making the label look "active" */
.fr-option input[type="checkbox"]:checked + label {
    background-color: var(--color-border-accent);
    color: var(--color-bg-deep);
    border-color: var(--color-border-accent);
}


/* --- Generic Custom Menu Styles --- */

/* --- Generic Custom Menu Styles --- */

#custom-menu-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.custom-menu {
    position: relative;
}

.custom-menu .menu-bar-button {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    font-family: var(--font-ui);
    font-size: 1em;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--timing-fast) ease;
}

.custom-menu .menu-bar-button:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--neon-cyan);
}

.custom-menu-dropdown {
    display: none;
    position: fixed; /* B"H - This is the key change */
    z-index: 10000;
    background-color: var(--color-backdrop);
    border: 1px solid var(--color-border);
    backdrop-filter: blur(15px);
    border-radius: var(--radius-md);
    padding: 8px;
    min-width: 220px;
    box-shadow: 0 10px 40px var(--shadow-color);
    transform-origin: top left;
    animation: scaleUp var(--timing-fast) ease forwards;
}

/* --- B"H - VIVID EXTREME HEX EDITOR (v3 - INSANE GOOD) --- */
#hex-editor-wrapper {
    flex-grow: 1;
    height: 100%;
    overflow-y: scroll;
    background-color: var(--color-bg-deep);
    font-family: var(--font-code);
    font-size: 1em;
    color: var(--color-text-secondary);
    position: relative;
    --line-height: 24px;
}
.hex-scroller{position:relative;width:100%;overflow:hidden}
.hex-content{position:relative;width:100%;height:100%}
.hex-line{position:absolute;left:0;right:0;display:flex;white-space:pre;padding:0 16px;height:var(--line-height);line-height:var(--line-height)}
.hex-offset{color:var(--color-text-tertiary);width:10ch;user-select:none}
.hex-bytes{width:calc(16 * 3ch);color:var(--color-text-primary)}
.hex-bytes span{display:inline-block;width:3ch;text-align:left;cursor:pointer;border-radius:2px}
.hex-ascii{width:18ch;padding-left:1ch;border-left:1px solid var(--color-border);user-select:none}
.hex-ascii span{display:inline-block;width:1ch;text-align:center;cursor:pointer;border-radius:2px}
.hex-bytes span.selected,.hex-ascii span.selected{background-color:var(--neon-cyan);color:var(--color-bg-deep);outline:none;animation:nexus-glow 1.5s infinite}
.hex-bytes span.dirty,.hex-ascii span.dirty{color:var(--neon-lime)}
.hex-bytes span.search-result,.hex-ascii span.search-result{background-color:rgba(255,0,255,0.4)}
.hex-input-handler{position:absolute;background:transparent;border:none;outline:none;padding:0;margin:0;font:inherit;color:transparent;text-align:center;caret-color:var(--neon-magenta);resize:none;opacity:0.5;z-index:10;width:1ch;left:-9999px}

.hex-search-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 8px; padding: 8px 16px; background: var(--color-bg-secondary); border-top: 1px solid var(--color-border); z-index: 100; }
.hex-search-input { flex-grow: 1; }
.hex-search-bar button, .hex-search-bar select { background-color: var(--color-bg-tertiary); border: 1px solid var(--color-border); color: var(--color-text-secondary); border-radius: var(--radius-sm); padding: 0 12px; font-weight: 600; }
.hex-search-bar button:hover, .hex-search-bar select:hover { background-color: var(--color-border); color: var(--neon-cyan); }

.hex-inspector {
    position: absolute;
    display: none; /* Will be set to 'grid' by JS */
    grid-template-columns: auto 1fr;
    gap: 4px 12px;
    padding: 8px;
    background: var(--color-backdrop);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    z-index: 100;
    font-size: 0.85em;
    backdrop-filter: blur(5px);
    transition: top 0.1s, left 0.1s; /* Smooth transitions */
    pointer-events: none; /* So it never blocks mouse clicks */
}

.hex-inspector span:nth-child(odd) { color: var(--color-text-tertiary); text-align: right; }
.hex-inspector span:nth-child(even) { color: var(--color-text-primary); font-weight: 600; }

.hex-nav-pad{position:absolute;bottom:20px;right:20px;z-index:1500;display:none;grid-template-areas:". up ." "left . right" ". down .";gap:8px;background-color:var(--color-backdrop);padding:12px;border-radius:50%;border:1px solid var(--color-border);opacity:.85}
.hex-nav-pad.visible{display:grid}
.hex-nav-pad button{width:44px;height:44px;background-color:var(--color-bg-secondary);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:50%;font-size:1.5em;line-height:1}
.hex-nav-pad button:hover{background-color:var(--color-border);color:var(--neon-cyan)}
.hex-nav-pad button[data-action=up]{grid-area:up} .hex-nav-pad button[data-action=down]{grid-area:down} .hex-nav-pad button[data-action=left]{grid-area:left} .hex-nav-pad button[data-action=right]{grid-area:right}
@media (min-width:769px){.hex-nav-pad{display:none !important}}


/* B"H - THE DATA ALTAR */

#data-altar-container {
    height: 100%;
    overflow: auto;
    background: radial-gradient(ellipse at center, rgba(10, 12, 20, 0.95) 0%, #02040a 70%);
    padding: 20px 30px;
    font-size: 1.1em;
    font-family: var(--font-code);
    animation: altar-breathe 15s ease-in-out infinite;
}

.altar-node {
    padding-left: 2em;
    position: relative;
    border-left: 1px solid rgba(255, 0, 255, 0.2);
}

.altar-row {
    display: flex;
    align-items: center;
    min-height: 28px;
    padding: 2px 0;
}
.altar-row:hover {
    background: rgba(168, 255, 0, 0.05);
}
.altar-row:hover .altar-action-btn {
    opacity: 1;
}

.altar-key {
    color: var(--neon-cyan);
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 3px;
    outline: none;
    cursor: text;
}
.altar-key:focus {
    background: rgba(0, 246, 255, 0.2);
    box-shadow: 0 0 10px var(--glow-cyan);
}

.altar-value {
    outline: none;
    padding: 2px 4px;
    border-radius: 3px;
    margin-left: 0.5em;
    cursor: text;
    white-space: pre-wrap;
    display: block;
}

.altar-value[contenteditable="true"] {
    min-height: 1.7em; /* Matches the line-height of the editor */
    display: block; /* Ensures min-height is respected */
}

.altar-value[contenteditable="true"]:focus {
    background: rgba(168, 255, 0, 0.2);
    box-shadow: 0 0 10px var(--glow-lime);
}

/* THE HACK: This forces an invisible, permanent newline at the end of the element. */
/* This makes the browser's innerText serialization completely predictable. */
.altar-value[contenteditable="true"]::after {
    content: "\A";
    white-space: pre;
}

.altar-content > .altar-value {
    /* This is now the base styling for our text area */
    display: block;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    overflow-y: hidden; /* Hide the scrollbar since it auto-sizes */
    
    /* Inherit the visual style of the Altar */
    width: 100%;
    font: inherit;
    font-family: var(--font-code);
    line-height: 1.6;
    padding: 2px 4px;
    margin-left: 0.5em;
    border-radius: 3px;
    
    /* Make the text color match the type */
    color: var(--neon-lime); /* Default for string */
}


.altar-content > .altar-value:focus {
    /* A simple, clean focus indicator */
    background: rgba(168, 255, 0, 0.2);
    box-shadow: 0 0 10px var(--glow-lime);
}



.altar-node[data-type="string"] .altar-value { color: var(--neon-lime); }

.altar-node[data-type="number"] .altar-value { color: #ffae57; }
.altar-node[data-type="boolean"] .altar-value { color: var(--neon-magenta); font-weight: bold; }
.altar-node[data-type="null"] .altar-value { color: var(--color-text-tertiary); font-style: italic; }

details summary {
    cursor: pointer;
    list-style: none; /* Hide default triangle */
}
details summary::-webkit-details-marker { display: none; }

.altar-action-btn {
    font-family: var(--font-code);
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-tertiary);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    margin-left: 8px;
    opacity: 0.2;
    transition: all 0.15s ease;
    font-size: 1.2em;
    font-weight: bold;
}
.altar-action-btn:hover {
    opacity: 1 !important;
    transform: scale(1.2);
    box-shadow: 0 0 10px var(--glow-cyan);
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
}
.action-delete-property:hover {
    color: var(--color-accent-danger);
    border-color: var(--color-accent-danger);
    box-shadow: 0 0 10px var(--color-accent-danger);
}

/*B"H*/
/* --- Uncommitted Changes Indicator --- */
/* A tab with this class has been saved locally to IndexedDB but not yet pushed to GitHub. */
.tab.uncommitted .tab-name::after { 
    content: ' ●'; /* A solid circle character */
    color: var(--neon-lime); /* A vibrant green, distinct from the 'dirty' magenta */
    font-size: 0.9em; 
    /* This will display next to the dirty indicator if a file is both dirty and uncommitted */
}

/*B"H*/
/* --- Drag and Drop Highlight --- */
.drag-over-target {
    background-color: rgba(0, 246, 255, 0.15) !important;
    box-shadow: inset 0 0 0 1px var(--neon-cyan);
    border-radius: var(--radius-sm);
}
/* Ensure transparency so the highlight is visible on both headers and list items */
.drag-over-target > .workspace-header,
.drag-over-target > .tree-item-name-wrap {
    background-color: transparent !important;
}