/*
 * GNU AGPL-3.0 License
 *
 * Copyright (c) 2021 - present core.ai . All rights reserved.
 *
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License
 * for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program. If not, see https://opensource.org/licenses/AGPL-3.0.
 *
 */

/* Central vertical control bar between sidebar and editor content */

@central-control-bar-width: 30px;

#centralControlBar {
    position: absolute;
    top: 0;
    height: 100%;
    width: @central-control-bar-width;
    left: @sidebar-width; /* updated dynamically when sidebar resizes */
    z-index: @z-index-brackets-main-content - 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0;
    box-sizing: border-box;
    user-select: none;
    /* Phoenix's sidebar uses a fixed dark panel color (#252525) in both
       light and dark themes. Use a slightly darker fixed tone here so the
       control bar reads as a distinct surface next to the sidebar while
       still staying on-theme in light mode. */
    background-color: #222;
    border-right: 1px solid rgba(0, 0, 0, 0.45);
    /* Extend CCB's paint by 2px on each side without affecting layout. Under
       non-integer DPR (e.g. 110% browser zoom) subpixel rounding can leave a
       1px gap between CCB and the sidebar on the left, and between CCB and the
       editor on the right. A solid box-shadow with zero blur paints CCB-colored
       pixels into those gaps without shifting any geometry. */
    box-shadow:
            -2px 0 0 0 #222,
            2px 0 0 0 #222;

    .ccb-group {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;

        &.ccb-group-file {
            flex: 0 1 auto;
            max-height: 220px;
            overflow: hidden;
            justify-content: flex-start;
            padding: 4px 0;
        }
    }

    .ccb-divider {
        height: 1px;
        margin: 4px 6px;
        background-color: rgba(255, 255, 255, 0.06);
    }

    /* New-style buttons (icons with FA) */
    .ccb-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 28px;
        margin: 0 3px;
        color: @project-panel-text-2;
        font-size: 15px;
        border-radius: 4px;
        cursor: pointer;
        text-decoration: none;
        transition: color 0.15s ease, background-color 0.15s ease;

        i {
            pointer-events: none;
        }

        svg.ccb-edit-icon {
            width: 15px;
            height: 11px;
            pointer-events: none;
        }

        &:hover {
            color: @project-panel-text-1;
            background-color: rgba(255, 255, 255, 0.08);
            text-decoration: none;
        }

        &:active {
            background-color: rgba(255, 255, 255, 0.12);
        }

        &.disabled,
        &[aria-disabled="true"] {
            opacity: 0.4;
            pointer-events: none;
        }
    }

    /* Nudge the collapse-editor icon up so it visually aligns with titlebar icons */
    #ccbCollapseEditorBtn {
        margin-top: -2px;

        svg {
            width: 15px;
            height: 15px;
            pointer-events: none;
        }

        /* Design mode on — give the button a "pressed chip" look. The lighter
           background reads as a selected toolbar item without introducing a
           new accent color into the middle of the UI. Icon color unchanged. */
        &.is-active,
        &.is-active:hover {
            background-color: rgba(255, 255, 255, 0.12);
            color: @project-panel-text-1;
        }
    }

    /* Vertical filename label — clicking reveals the current file in the
       file tree (keeps the old binoculars-on-label affordance). */
    .ccb-file-label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 4px 0;
        color: @project-panel-text-2;
        height: 100%;
        overflow: hidden;
        cursor: pointer;

        .ccb-file-dot {
            flex: 0 0 auto;
            line-height: 1;
            color: #f1b84e;
            visibility: hidden;
            font-size: 1rem;
        }

        &.is-dirty .ccb-file-dot {
            visibility: visible;
        }

        .ccb-file-name {
            flex: 1 1 auto;
            min-height: 0;
            /* Base: vertical-rl + rotate(180deg) gives the same bottom-to-top
               reading direction as sideways-lr and works in all engines
               (including WebKit/Tauri on macOS where sideways-lr is unsupported
               and silently falls back to horizontal-tb). */
            writing-mode: vertical-rl;
            text-orientation: sideways;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: @project-panel-text-1;
            font-size: 13px;
            font-weight: 500;
            /* Promote to its own compositing layer + force AA — keeps the
               rotated glyphs crisp even when the system falls back to the
               slow text path. rotate(180deg) flips vertical-rl top-to-bottom
               into bottom-to-top reading order. */
            transform: rotate(180deg) translateZ(0);
            backface-visibility: hidden;
            -webkit-font-smoothing: antialiased;
            text-rendering: geometricPrecision;
        }

        &:hover .ccb-file-name {
            text-decoration: underline;
        }
    }

}

/* The file label is only useful in design mode — in code mode the active
   file is already obvious from the tab bar / working-files list, so the
   vertical label (and its preceding divider) would be redundant chrome
   that steals vertical space in the CCB. */
body:not(.ccb-editor-collapsed) #centralControlBar .ccb-file-divider,
body:not(.ccb-editor-collapsed) #centralControlBar .ccb-group-file {
    display: none;
}

/* Editor collapse: actual layout handled in JS via .content width/visibility */
.ccb-editor-collapsed .content {
    overflow: hidden;
}

/* Visually move the sidebar's right-resizer to the right edge of the central
   control bar, so the drag handle sits between the control bar and the editor
   / live-preview area. The Resizer keeps the handle at `left: sidebar.width`
   internally (and keeps bumping it back after reposition), so a transform is
   used here instead of overriding `left`. Hit-testing follows the transform.
   When the sidebar is hidden the Resizer moves the handle out to become a
   sibling of #sidebar inside .main-view — apply the same shift there. */
#sidebar > .horz-resizer,
.main-view > .horz-resizer {
    transform: translateX(@central-control-bar-width);
}

/* In design mode the sidebar resizer doubles as the sidebar↔live-preview
   splitter — hide the main-toolbar's own left-resizer so there aren't two
   overlapping handles in the same region. */
.ccb-editor-collapsed #main-toolbar > .horz-resizer {
    display: none;
}

/* Cap the sidebar in design mode so the live-preview panel always keeps at
   least ~200px of its own. A percentage of the viewport (e.g. 70vw) became
   too wide on large screens — the live preview would shrink to a useless
   sliver. Enforcing this via CSS max-width stops the drag itself rather than
   snapping back after the Resizer has already written a larger value, which
   also avoids ResizeObserver loop warnings from rapid width writes. The
   230px accounts for the 30px control bar plus a 200px LP minimum. */
.ccb-editor-collapsed #sidebar {
    max-width: ~"calc(100vw - 230px)";
}