/* ============================================================
   PixLab Forensic — App layout
   body.app > aside.sidebar + main.main-area > topbar + split-area
   ============================================================ */

body.app {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* ---------- Left sidebar ---------- */

.sidebar {
    width: var(--sidebar-w);
    height: 100%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-right: 1px solid var(--border-a30);
    z-index: 20;
    transition: width var(--t-med), background-color var(--t-med);
    overflow: hidden;
}

.sidebar.collapsed {
    width: var(--sidebar-w-collapsed);
}

.sidebar.collapsed .sidebar-text {
    opacity: 0;
    pointer-events: none;
}

.sidebar-text {
    transition: opacity 200ms ease;
}

.brand-row {
    height: var(--topbar-h);
    min-width: var(--sidebar-w);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-6);
    border-bottom: 1px solid var(--border-a30);
}

.brand-icon {
    font-size: 1.5rem;
    color: var(--accent-cyan);
}

.brand-name {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    background-image: linear-gradient(90deg, var(--accent-cyan), var(--accent-blue));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.side-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    min-width: var(--sidebar-w);
}

.nav-section-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: var(--sp-4) var(--sp-2) var(--sp-2);
}

.nav-section-title.spaced {
    margin-top: var(--sp-8);
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--sp-3);
    border-radius: var(--radius-lg);
    color: var(--text-muted);
    transition: background-color var(--t-fast), color var(--t-fast);
    white-space: nowrap;
}

.nav-item:hover {
    background-color: var(--bg-700);
}

.nav-item i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.nav-label {
    margin-left: var(--sp-3);
    font-size: 0.875rem;
    font-weight: 500;
}

.nav-item[data-tab="visual"]:hover i {
    color: var(--accent-blue);
}

.nav-item[data-tab="audio"]:hover i {
    color: var(--accent-purple);
}

.nav-item[data-tab="graph"]:hover i {
    color: var(--accent-green);
}

.nav-item.active {
    background-color: var(--bg-700);
}

.nav-item.active i,
.nav-item.active .nav-label {
    color: var(--text-high);
}

.active-indicator {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background-color: var(--accent-blue);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.nav-item.active .active-indicator {
    display: block;
}

.upload-zone {
    margin-top: var(--sp-2);
    border: 2px dashed var(--border-a50);
    border-radius: var(--radius-xl);
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    cursor: pointer;
    color: var(--text-muted);
    text-align: center;
    transition: border-color var(--t-fast), background-color var(--t-fast);
    white-space: nowrap;
}

.upload-zone i {
    font-size: 1.5rem;
}

.upload-zone:hover,
.upload-zone.drag-over {
    border-color: rgba(6, 182, 212, 0.55);
    background-color: var(--bg-700);
    color: var(--text-high);
}

.upload-hint {
    font-size: 0.75rem;
    line-height: 1.5;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4);
    border-top: 1px solid var(--border-a30);
    min-width: var(--sidebar-w);
}

/* ---------- Main area / topbar ---------- */

.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    position: relative;
    background-color: var(--bg-900);
}

.topbar {
    min-height: var(--topbar-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-2) var(--sp-6);
    gap: var(--sp-3);
    border-bottom: 1px solid var(--border-a30);
    background-color: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10;
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.topbar-left {
    flex: 1;
    min-width: 0;
}

.topbar-right,
.topbar-left > .icon-btn,
.topbar-left > .v-sep {
    flex-shrink: 0;
}

.topbar-heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.topbar-title {
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-purpose {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-muted);
    text-wrap: balance;
}

/* ---------- Split area: visualizer | resizer | inspector ---------- */

.split-area {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

.visualizer {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.resizer {
    width: 4px;
    background-color: var(--border-a20);
    cursor: col-resize;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: background-color var(--t-fast);
}

.resizer:hover,
.resizer.dragging {
    background-color: rgba(59, 130, 246, 0.55);
}

.resizer .grip {
    width: 2px;
    height: 2rem;
    border-radius: var(--radius-pill);
    background-color: var(--border-a50);
}

.inspector {
    position: relative;
    width: var(--inspector-w);
    flex-shrink: 0;
    background-color: var(--glass-bg);
    border-left: 1px solid var(--border-a30);
    display: flex;
    flex-direction: column;
    z-index: 20;
    box-shadow: var(--shadow-pane);
    transition: width var(--t-med), background-color var(--t-med);
    overflow: hidden;
}

/* ---- Collapsible inspector (per-user preference, persisted) ---- */

.inspector.collapsed {
    width: 3rem;
}

.inspector.collapsed .inspector-tabs,
.inspector.collapsed .chat-history,
.inspector.collapsed .chat-input-area {
    display: none;
}

/* Slim rail shown while collapsed */
.inspector-rail {
    display: none;
}

.inspector.collapsed .inspector-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    height: 100%;
}

.rail-btn {
    padding: 0.5rem;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    transition: background-color var(--t-fast), color var(--t-fast);
}

.rail-btn:hover {
    background-color: var(--bg-700);
    color: var(--text-high);
}

.rail-btn i {
    font-size: 1.125rem;
    display: block;
}

.rail-sep {
    width: 1.25rem;
    height: 1px;
    background-color: var(--border-a30);
}

.collapse-inspector {
    flex-shrink: 0;
    margin-left: auto;
}

/* Hide the drag handle while the inspector is collapsed */
.split-area:has(.inspector.collapsed) #pane-resizer {
    display: none;
}

@media (min-width: 1024px) {
    :root {
        --inspector-w: 24rem;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 767px) {

    .hide-sm {
        display: none !important;
    }

    .topbar {
        padding: var(--sp-2) var(--sp-3);
        gap: var(--sp-2);
    }

    .topbar-left,
    .topbar-right {
        gap: var(--sp-2);
    }

    .topbar-title {
        font-size: 0.9375rem;
    }

    .topbar-right .export-label {
        display: none;
    }

    .topbar-right .btn-ghost {
        padding: 0.5rem;
    }
}