/* ==================================
   GLOBAL
================================== */

body{
    margin:0;
    background:#000;
    color:#fff;
    font-family:Arial, sans-serif;
    overflow:hidden;
}

/* ==================================
   HEADER
================================== */

header{

    height:60px;

    background:#111;
    border-bottom:1px solid #333;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px;

    box-sizing:border-box;
}

.nav-group,
.zoom-group,
.right-group{

    display:flex;
    gap:8px;
    align-items:center;
}

button{

    background:#222;
    color:white;

    border:1px solid #444;

    padding:8px 12px;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease;
}

button:hover{

    background:#333;
    border-color:#00aaff;
}

/* ==================================
   CONSTELLATION INFO
================================== */

#constellationInfo{

    position:absolute;

    left:0;
    top:60px;

    width:75vw;
    height:50px;

    background:#181818;

    border-bottom:1px solid #333;

    padding:10px;

    box-sizing:border-box;

    font-size:13px;

    overflow:hidden;
}

/* ==================================
   VIEWPORT (VISIBLE CAMERA)
================================== */

#viewport{

    position:absolute;

    top:110px;
    left:0;

    width:75vw;
    height:calc(100vh - 110px);

    overflow:hidden;

    background:#050505;
}

/* ==================================
   WORLD (INFINITE ATLAS SPACE)
================================== */

#world{

    position:absolute;

    width:20000px;
    height:20000px;

    top:0;
    left:0;

    transform-origin:0 0;

    will-change:transform;
}

/* ==================================
   RELATIONSHIP LINES
================================== */

#links{

    position:absolute;

    width:20000px;
    height:20000px;

    left:0;
    top:0;

    pointer-events:none;

    transform-origin:0 0;

    will-change:transform;
}

/* ==================================
   INFO PANEL
================================== */

#infoPanel{

    position:absolute;

    top:60px;
    right:0;

    width:25vw;
    height:calc(100vh - 60px);

    background:#111;

    border-left:1px solid #333;

    overflow:auto;

    padding:20px;

    box-sizing:border-box;

    transition:all .4s ease;
}

#infoPanel.collapsed{

    width:0;

    padding:0;

    overflow:hidden;

    border-left:none;
}

/* ==================================
   PANEL TOGGLE
================================== */

#panelToggle{

    position:absolute;

    top:80px;
    right:25vw;

    width:26px;
    height:60px;

    background:#222;

    border:1px solid #444;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    z-index:9000;

    transition:right .4s ease;
}

/* ==================================
   MEDIA WINDOWS
================================== */

.media-box{

    position:absolute;

    width:340px;
    height:240px;

    background:#111;

    border:1px solid #444;

    overflow:hidden;

    resize:both;

    min-width:280px;
    min-height:200px;

    max-width:2000px;
    max-height:1500px;

    transition:
        left .4s ease,
        top .4s ease,
        width .3s ease,
        height .3s ease,
        opacity .3s ease,
        border-color .3s ease;
}

.media-box:hover{

    border-color:#00aaff;
}

/* ==================================
   IMMERSIVE MODE
================================== */

.media-box.immersive{

    left:20px !important;
    top:20px !important;

    width:95vw !important;
    height:90vh !important;

    z-index:99999;

    border:2px solid #00aaff;

    box-shadow:
        0 0 30px rgba(0,170,255,0.4);
}

/* ==================================
   WINDOW HEADER
================================== */

.drag-handle{

    height:40px;

    background:#222;

    padding:4px 8px;

    box-sizing:border-box;

    cursor:move;

    user-select:none;
}

/* ==================================
   MEDIA AREA
================================== */

.media-container{

    width:100%;
    height:calc(100% - 40px);

    background:black;

    overflow:hidden;

    position:relative;
}

/* ==================================
   IMAGE / VIDEO MEDIA
================================== */

.media-container img,
.media-container video{

    width:100%;
    height:100%;

    object-fit:contain;

    transform-origin:center center;

    user-select:none;

    cursor:grab;

    will-change:transform;
}

/* ==================================
   WEB OBJECTS
================================== */

.media-container iframe{

    width:100%;
    height:100%;

    border:none;

    background:white;

    transform-origin:top left;
}

/* ==================================
   METADATA TAGS
================================== */

.tag{

    display:inline-block;

    background:#333;

    border-radius:4px;

    padding:4px 8px;

    margin:3px;

    font-size:12px;
}

.label{

    font-size:11px;

    color:#aaa;
}

.view-state{

    margin-left:8px;

    color:#00aaff;

    font-weight:bold;
}

/* ==================================
   LIBRARY VIEW
================================== */

.library-item{

    padding:12px;

    margin-bottom:8px;

    background:#1a1a1a;

    border:1px solid #333;

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease;
}

.library-item:hover{

    border-color:#00aaff;

    background:#222;
}

.library-type{

    margin-top:4px;

    color:#888;

    font-size:12px;
}

/* ==================================
   MODAL LAYER
================================== */

#modalLayer{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:100000;
}

.library-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:12px;
}

.library-card{

    border:1px solid #333;

    background:#1a1a1a;

    cursor:pointer;

    overflow:hidden;

    transition:
        border-color .2s ease,
        transform .2s ease;
}

.library-card:hover{

    border-color:#00aaff;

    transform:translateY(-2px);
}

.library-preview{

    width:100%;
    height:140px;

    background:black;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.library-preview img,
.library-preview video{

    width:100%;
    height:100%;

    object-fit:cover;
}

.library-meta{

    padding:10px;
}

.library-type{

    color:#888;

    font-size:12px;

    margin-top:4px;
}

.library-web{

    color:white;

    font-size:14px;

    letter-spacing:2px;
}

.annotation-card{

    margin-top:10px;

    padding:10px;

    background:#1a1a1a;

    border:1px solid #333;
}

#annotationStatus{

    margin-top:10px;

    padding:10px;

    background:#1a1a1a;

    border:1px solid #333;
}