/* ============================================================
 *  TREE VIEW  (Canvas-based)
 * ============================================================ */
#view-tree {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: calc(100vh - 54px);
}
#view-tree.active { display: flex !important; flex-direction: column; }

.tree-controls {
    padding: 12px 16px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.tree-search-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}

#tree-search-results {
    position: static !important;
    left: auto !important;
    right: auto !important;
    margin-top: 4px;
}

#tree-canvas-wrapper {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-tree);
}

#tree-canvas {
    display: block;
    cursor: grab;
    touch-action: none;
}
#tree-canvas:active { cursor: grabbing; }

.tree-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-faint);
    font-size: 0.95rem;
    font-style: italic;
    pointer-events: none;
    text-align: center;
    line-height: 1.8;
    width: 90%;
}
.tree-hint strong { color: var(--text-muted); font-style: normal; }