/**
 * Resizable Panels Styles
 *
 * Styles for resize handles, drag interactions, and panel states
 */

/* ============================================================================
   RESIZE HANDLES
   ============================================================================ */

.resize-handle {
    position: absolute;
    top: 50px; /* Below header */
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 1000;
    transition: background 0.2s;
}

.resize-handle::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: transparent;
    transition: background 0.2s;
}

.resize-handle:hover::before {
    background: #4a9eff;
}

.resize-handle:active::before {
    background: #6bb3ff;
}

.resize-handle-left {
    left: 240px; /* Initial position */
    background: transparent;
}

.resize-handle-left:hover {
    background: rgba(74, 158, 255, 0.1);
}

.resize-handle-right {
    right: 300px; /* Initial position */
    background: transparent;
}

.resize-handle-right:hover {
    background: rgba(74, 158, 255, 0.1);
}

/* Dragging state */
.main-container.resizing {
    cursor: col-resize;
    user-select: none;
}

.main-container.resizing .resize-handle::before {
    background: #4a9eff;
}

.main-container.resizing * {
    pointer-events: none;
}

.main-container.resizing .resize-handle {
    pointer-events: all;
}

/* ============================================================================
   PANEL STATES
   ============================================================================ */

/* Override default flex behavior when resizing */
.left-sidebar,
.terminal-view,
.right-panel {
    transition: width 0.2s ease-out;
}

/* Disable transitions during drag */
.main-container.resizing .left-sidebar,
.main-container.resizing .terminal-view,
.main-container.resizing .right-panel {
    transition: none;
}

/* City View Modes */

/* Large mode - expanded but not covering terminals */
.right-panel.city-view-large {
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);
}

.right-panel.city-view-large .city-view-section {
    /* Expand city view height in large mode */
    flex: 2;
}

/* Max mode - covers terminals, stops at sidebar */
.right-panel.city-view-max {
    position: absolute;
    top: 50px;
    bottom: 0;
    right: 0;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
    border-left: 2px solid #4a9eff;
}

.right-panel.city-view-max .city-view-section {
    flex: 3;
    /* Make city view dominant */
}

.right-panel.city-view-max .file-context-section {
    /* Shrink file context in max mode */
    flex: 1;
}

/* Visual indicator when city view is covering terminals */
.right-panel.city-view-max::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom,
        #4a9eff 0%,
        #6bb3ff 50%,
        #4a9eff 100%
    );
    animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* ============================================================================
   CITY VIEW CONTROLS
   ============================================================================ */

.city-controls {
    display: flex;
    gap: 4px;
}

#btn-city-maxmin {
    font-size: 16px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#btn-city-maxmin:hover {
    background: #3d3d3d;
    border-color: #4a9eff;
    color: #4a9eff;
}

.right-panel.city-view-max #btn-city-maxmin {
    background: #4a9eff;
    color: #1a1a1a;
    border-color: #4a9eff;
}

.right-panel.city-view-max #btn-city-maxmin:hover {
    background: #6bb3ff;
}

/* ============================================================================
   TERMINAL ADJUSTMENTS
   ============================================================================ */

/* When city view is max, dim terminals slightly */
.right-panel.city-view-max ~ .terminal-view {
    opacity: 0.3;
    pointer-events: none;
}

/* But allow interaction to close max mode */
.right-panel.city-view-max ~ .terminal-view {
    pointer-events: all;
    cursor: pointer;
}

.right-panel.city-view-max ~ .terminal-view::after {
    content: 'Click to restore normal view';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(26, 26, 26, 0.9);
    color: #4a9eff;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1001;
}

.right-panel.city-view-max ~ .terminal-view:hover::after {
    opacity: 1;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Small screens - disable some features */
@media (max-width: 1024px) {
    .resize-handle {
        width: 8px; /* Easier to grab on touch */
    }

    .right-panel.city-view-max {
        /* On small screens, max mode takes full width except sidebar */
        width: calc(100vw - 200px) !important;
    }
}

@media (max-width: 768px) {
    /* Mobile - disable resize, use breakpoints instead */
    .resize-handle {
        display: none;
    }

    .left-sidebar {
        width: 200px !important;
    }

    .right-panel {
        width: 250px !important;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Keyboard focus for resize handles */
.resize-handle:focus {
    outline: 2px solid #4a9eff;
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .resize-handle::before {
        background: currentColor;
    }

    .resize-handle:hover::before {
        background: #fff;
    }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
    .left-sidebar,
    .terminal-view,
    .right-panel {
        transition: none;
    }

    .right-panel.city-view-max::before {
        animation: none;
    }
}