/* ======================================================
   Observer Desktop
   Visual language inspired by the dark, elegant dashboard
   ====================================================== */

.observer-desktop {
    width: 100%;
    height: 100%;
    min-height: 0;

    position: relative;
    overflow: hidden;

    background: #151515;
}


/* ======================================================
   Welcome
   ====================================================== */

.observer-welcome {
    display: block;
    width: 100%;
    min-width: 0;
    height: stretch;
    box-sizing: border-box;
    overflow: scroll;
    scrollbar-width: none;
}


/* ======================================================
   Observer Window
   ====================================================== */

.observer-window {
    position: absolute;

    min-width: 320px;
    min-height: 220px;

    display: flex;
    flex-direction: column;

    background: #1d1d1f;

    border: 1px solid #343438;
    border-radius: 10px;

    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.42),
        0 6px 20px rgba(0, 0, 0, 0.28);

    overflow: hidden;

    user-select: none;
    touch-action: manipulation;

    transition:
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}


/* ======================================================
   Fullscreen navigation policy
   ====================================================== */

.observer-window-fullscreen,
.observer-window-chrome-hidden {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.observer-window-fullscreen.observer-window-active,
.observer-window-chrome-hidden.observer-window-active {
    border-color: transparent;
    box-shadow: none;
}


/* ======================================================
   Active Window
   ====================================================== */

.observer-window-active {
    border-color: #45454b;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.50),
        0 8px 24px rgba(0, 0, 0, 0.30);
}


/* ======================================================
   Title Bar
   ====================================================== */

.observer-window-titlebar {
    height: 40px;

    flex-shrink: 0;

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

    padding: 0 8px 0 13px;

    background: #202022;
    color: #f4f4f5;

    border-bottom: 1px solid #303034;

    cursor: move;
    touch-action: none;
}


/* ======================================================
   Window Title
   ====================================================== */

.observer-window-title {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 13px;
    font-weight: 600;

    color: #f1f1f2;

    overflow: hidden;
}

.observer-window-title span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ======================================================
   Window Controls
   ====================================================== */

.observer-window-controls {
    display: flex;
    align-items: center;
    gap: 3px;
}


/* ======================================================
   Window Buttons
   ====================================================== */

.observer-window-button {
    width: 30px;
    height: 28px;

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

    border: 0;
    border-radius: 5px;

    background: transparent;
    color: #bdbdc4;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.observer-window-button:hover {
    background: #2d2d31;
    color: #ffffff;
}

.observer-window-close:hover {
    background: #d83a4b;
    color: #ffffff;
}


/* ======================================================
   Window Content
   ====================================================== */

.observer-window-content {
    position: relative;

    flex: 1;
    min-height: 0;

    overflow: auto;

    background: #181819;

    color: #ededee;

    user-select: text;

    scrollbar-width: thin;
    scrollbar-color: #444449 transparent;
}

.observer-window-content::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.observer-window-content::-webkit-scrollbar-track {
    background: transparent;
}

.observer-window-content::-webkit-scrollbar-thumb {
    background: #414147;
    border-radius: 10px;
}


/* ======================================================
   Minimized Window
   ====================================================== */

.observer-window-minimized {
    display: none;
}


/* ======================================================
   Maximized Window
   ====================================================== */

.observer-window-maximized {
    left: 0 !important;
    top: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: 0;
    border: 0;

    box-shadow: none;
}


/* ======================================================
   Resize Handles
   ====================================================== */

.observer-window-resize {
    position: absolute;
    z-index: 10;
}


/* ======================================================
   Resize North / South
   ====================================================== */

.observer-window-resize-n,
.observer-window-resize-s {
    left: 8px;
    right: 8px;
    height: 6px;
}

.observer-window-resize-n {
    top: 0;
    cursor: n-resize;
}

.observer-window-resize-s {
    bottom: 0;
    cursor: s-resize;
}


/* ======================================================
   Resize East / West
   ====================================================== */

.observer-window-resize-e,
.observer-window-resize-w {
    top: 8px;
    bottom: 8px;
    width: 6px;
}

.observer-window-resize-e {
    right: 0;
    cursor: e-resize;
}

.observer-window-resize-w {
    left: 0;
    cursor: w-resize;
}


/* ======================================================
   Resize Corners
   ====================================================== */

.observer-window-resize-ne,
.observer-window-resize-nw,
.observer-window-resize-se,
.observer-window-resize-sw {
    width: 10px;
    height: 10px;
}

.observer-window-resize-ne {
    top: 0;
    right: 0;
    cursor: ne-resize;
}

.observer-window-resize-nw {
    top: 0;
    left: 0;
    cursor: nw-resize;
}

.observer-window-resize-se {
    bottom: 0;
    right: 0;
    cursor: se-resize;
}

.observer-window-resize-sw {
    bottom: 0;
    left: 0;
    cursor: sw-resize;
}


/* ======================================================
   Dragging / Resizing
   ====================================================== */

.observer-window-dragging,
.observer-window-resizing {
    user-select: none;
}

.observer-window-dragging * {
    cursor: move !important;
}


/* ======================================================
   TopBar Windows / Open Applications
   ====================================================== */

.topBarWindows {
    display: flex;
    align-items: center;

    gap: 6px;

    height: 50px;
    padding: 0 8px;

    background: #1a1a1b;

    overflow-x: auto;
    scrollbar-width: none;
    border-bottom: 1px solid #2d2d30;
}

.topBarWindows::-webkit-scrollbar {
    display: none;
}


/* ======================================================
   TopBar Window Item
   ====================================================== */

.topBarWindowItem {
    height: 34px;

    min-width: 125px;
    max-width: 200px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 0 12px;

    border: 1px solid transparent;
    border-radius: 7px;

    background: #222224;

    color: #bcbcc3;

    cursor: pointer;
    user-select: none;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.topBarWindowItem:hover {
    background: #2a2a2d;
    color: #ffffff;
}

.topBarWindowItem-active {
    background: #2b2b2e;
    border-color: #3b3b40;
    color: #ffffff;
}


/* Home/permanent tabs never reserve space for a close control. */
.topBarWindowItem-permanent {
    padding-right: 12px;
}


/* ======================================================
   TopBar Window Icon
   ====================================================== */

.topBarWindowItemIcon {
    width: 18px;

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

    color: #a46cf5;
}


/* ======================================================
   TopBar Window Text
   ====================================================== */

.topBarWindowItemText {
    flex: 1;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 13px;
    font-weight: 600;
}