/* Window Controls Overlay — desktop PWA title bar integration */

/* stylelint-disable media-feature-name-value-no-unknown -- WCO is a valid PWA display mode */
@media (display-mode: window-controls-overlay) {
    :root {
        --wco-top: env(titlebar-area-y, 0px);
        --wco-left: env(titlebar-area-x, 0px);
        --wco-width: env(titlebar-area-width, 100%);
        --wco-height: env(titlebar-area-height, 0px);
    }

    body {
        padding-top: var(--wco-height);
    }

    .site-header,
    .app-header {
        position: fixed;
        top: var(--wco-top);
        left: var(--wco-left);
        width: var(--wco-width);
        height: var(--wco-height);
        z-index: 10000;
        display: flex;
        align-items: center;
        padding: 0 12px;
        background: var(--header-bg, #222);
        -webkit-app-region: drag;
        app-region: drag;
    }

    /* Buttons and links inside the header must be clickable (not draggable) */
    .site-header a,
    .site-header button,
    .site-header input,
    .site-header select,
    .app-header a,
    .app-header button,
    .app-header input,
    .app-header select {
        -webkit-app-region: no-drag;
        app-region: no-drag;
    }

    .site-header__title,
    .app-header__title {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-primary, #eee);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}