/* ================================================================
   MOBILE BANNER
   ================================================================ */
.mobile-banner {
    display: none;
    position: sticky;
    top: var(--byte-menubar-h);
    left: 0; right: 0;
    padding: 10px 14px;
    background: var(--byte-primary-soft);
    border-bottom: 1px solid var(--byte-border-warm);
    color: var(--byte-text);
    font-size: 13px;
    z-index: 999;
    line-height: 1.4;
}
.mobile-banner strong { color: var(--byte-primary); font-weight: 600; }
.mobile-banner__legal { display: block; margin-top: 6px; font-size: 12px; opacity: 0.85; }
.mobile-banner__legal a { color: var(--byte-text); text-decoration: underline; text-underline-offset: 2px; }
.mobile-banner__legal a:hover, .mobile-banner__legal a:focus { color: var(--byte-primary); }
.mobile-banner__legal span { margin: 0 6px; opacity: 0.5; }

/* ================================================================
   RESPONSIVE
     >= 1025px   →  Full desktop OS
     768–1024px  →  Tablet — floating windows but tighter chrome
     <= 767px    →  Mobile — windows stack as cards
   ================================================================ */
@media (max-width: 900px) {
    .menubar { padding: 0 8px; }
    .menubar__menu:nth-of-type(n+4) { display: none; }
    .window { min-width: 280px; }
    .dock { gap: 6px; padding: 6px 10px; }
    .dock-item { width: 44px; height: 44px; font-size: 22px; }
}
@media (max-width: 720px) {
    .tray-item:not(.tray-clock) { display: none; }
}

@media (max-width: 767px) {
    /* Mobile-OS-Guard: Wenn `body.mobile-os` aktiv (mobile-shell.js geladen),
       greifen die mobile-shell.css-Regeln. Andernfalls Fallback auf den
       degraded-stacked-cards-Layout (defensive — falls JS fehlschlägt). */
    html, body { overflow: auto; height: auto; min-height: 100%; }
    body:not(.mobile-os) { user-select: text; cursor: auto; }

    body:not(.mobile-os) .wallpaper { position: fixed; z-index: 0; }
    body:not(.mobile-os) .wallpaper__clock { display: none; }

    body:not(.mobile-os) .desktop {
        position: static;
        padding: 12px 12px calc(var(--byte-dock-h) + 32px);
        height: auto;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    body:not(.mobile-os) .desktop-icons { display: none; }
    body:not(.mobile-os) .sticky-notes-host { display: none; }
    body:not(.mobile-os) .window {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0;
        max-height: none;
        margin: 0;
        transform: none !important;
        display: flex !important;
        animation: none !important;
        opacity: 1 !important;
    }
    body:not(.mobile-os) .window.focused,
    body:not(.mobile-os) .window.unfocused { box-shadow: var(--byte-shadow-window); }
    body:not(.mobile-os) .window.unfocused .titlebar { opacity: 1; }
    body:not(.mobile-os) .window.unfocused .traffic__dot { background: var(--byte-text-subtle); border-color: transparent; }

    body:not(.mobile-os) .window.minimized { display: flex !important; }
    body:not(.mobile-os) .window.minimized .window__body,
    body:not(.mobile-os) .window.minimized .resizer { display: none; }
    body:not(.mobile-os) .window.minimized .titlebar { cursor: pointer; }

    body:not(.mobile-os) .titlebar { cursor: default; }
    body:not(.mobile-os) .resizer { display: none; }
    body:not(.mobile-os) .window__body { max-height: 70vh; }

    .menubar { padding: 0 10px; background: rgba(8, 18, 23, 0.95); }
    .menubar__app, .menubar__menu { display: none; }
    .menubar__tray { gap: 0; }
    .tray-item:not(.tray-clock) { display: none; }

    .mobile-banner { display: block; }

    .dock-wrap { bottom: 0; padding-bottom: env(safe-area-inset-bottom, 4px); }
    .dock {
        gap: 4px; padding: 6px 10px;
        border-radius: 14px 14px 0 0;
        width: 100%; max-width: 100vw;
        justify-content: space-around;
        overflow-x: auto;
    }
    .dock::-webkit-scrollbar { display: none; }
    .dock-item { width: 40px; height: 40px; font-size: 20px; flex-shrink: 0; }
    .dock-item:hover { transform: none; box-shadow: none; }
    .dock-item__tip { display: none; }
    .dock-sep { display: none; }

    .palette-backdrop { padding-top: 12vh; }
    .palette { width: 92vw; }

    .notif-stack { left: 14px; right: 14px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .window, .dock-item, .traffic__dot, .menubar__app, .menubar__menu, .palette__item {
        transition: none !important;
    }
    .window.opening, .notif { animation: none !important; }
    .dock-item:hover { transform: none; }
}

/* ================================================================
   PRINT
   ================================================================ */
@media print {
    body { overflow: visible; background: white; color: black; }
    .menubar, .dock-wrap, .palette-backdrop, .notif-stack, .mobile-banner, .wallpaper, .desktop-icons { display: none !important; }
    .desktop { position: static; padding: 0; }
    .window {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc;
        margin-bottom: 24px;
        background: white !important;
        color: black !important;
        display: block !important;
    }
    .window.minimized { display: none !important; }
    .titlebar, .resizer, .traffic { display: none !important; }
}
/* ============================================================
   RESPONSIVE — hide some controls on narrow screens
   ============================================================ */
@media (max-width: 900px) {
    /* Spotlight ist eh schon Icon-only — nichts zu verstecken */
}
@media (max-width: 767px) {
    #spotlight-btn, #sound-btn, #sysmon-btn { display: none; }
    .ctxmenu, .snap-preview { display: none !important; }
}