/*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:
            linear-gradient(var(--neon-cyan) 1px, transparent 1px),
            linear-gradient(to right, 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;
    }
    @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;
    

}
    .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: linear-gradient(to top, var(--color-bg-primary) 95%, transparent);
        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; 
        box-shadow: 0 0 40px var(--glow-cyan); 
        
        
        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; 
        box-shadow: 0 10px 40px var(--shadow-color), 0 0 15px var(--glow-magenta);
        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-shadow: 0 0 10px var(--glow-cyan);
        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;
    }
    
    
    
    /* --- MOBILE RESPONSIVENESS (UNCHANGED LOGIC) --- */
    @media (max-width: 768px) {
        .app-container { grid-template-columns: 1fr; }
        .sidebar {
            grid-row: 1 / 4; position: fixed; top: 0; left: 0; height: 100%; width: 85%; max-width: 320px;
            transform: translateX(-100%); z-index: 1100; 
            
            
        
        }
        .sidebar.is-open { transform: translateX(0); }
        .sidebar-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 1099;
            opacity: 0; transition: opacity var(--timing-med) ease; pointer-events: none;
        }
        .sidebar-overlay.is-visible { opacity: 0; }
        .main-content { grid-column: 1 / 2; }
        .top-panel { grid-column: 1 / 2; }
        .status-bar {
    grid-column: 1 / 2; /* ADD THIS LINE */
    font-size: 0.8em;
}
        
        
    }
    
    
    /* B"H - DESKTOP SIDEBAR COLLAPSE LOGIC */
.app-container.sidebar-collapsed {
    grid-template-columns: 0 1fr !important;
}

.app-container.sidebar-collapsed .sidebar {
    border-right-width: 0;
    overflow: hidden; /* Prevents content from showing during transition */
}




/*
    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 {
        display: none;
    }
}




.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;
}