/* ================================================================
   WINDOWS
   ================================================================ */
.window {
    position: absolute;
    background: var(--byte-surface-glass);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid var(--byte-border-strong);
    border-radius: var(--byte-r-lg);
    box-shadow: var(--byte-shadow-window);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--byte-t-normal), transform var(--byte-t-window), opacity var(--byte-t-window);
    min-width: 320px;
    min-height: 200px;
    user-select: none;
}
.window.focused { box-shadow: var(--byte-shadow-window-focus); }
.window.minimizing { transform: scale(0.3) translateY(80vh); opacity: 0; pointer-events: none; }
.window.minimized { display: none; }
.window.opening { animation: byte-win-open 0.28s cubic-bezier(.2,.8,.2,1); }
.window.maximized { border-radius: 0 !important; transition: none; }
@keyframes byte-win-open {
    from { transform: scale(0.92) translateY(20px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Titlebar */
.titlebar {
    height: 36px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
    border-bottom: 1px solid var(--byte-border);
    display: flex; align-items: center;
    padding: 0 12px;
    gap: 12px;
    cursor: grab;
    position: relative;
    touch-action: none;
}
.titlebar:active { cursor: grabbing; }
.window.maximized .titlebar { cursor: default; }
.window.unfocused .titlebar { opacity: 0.75; }

.traffic { display: flex; gap: 6px; align-items: center; }
.traffic__dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.2);
    cursor: pointer;
    padding: 0;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    transition: filter var(--byte-t-fast), transform var(--byte-t-fast);
}
.traffic__dot--close    { background: var(--byte-danger); }
.traffic__dot--minimize { background: var(--byte-warning); }
.traffic__dot--maximize { background: var(--byte-success); }
.traffic__dot::before {
    content: '';
    color: rgba(0,0,0,0.55);
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    opacity: 0;
    transition: opacity var(--byte-t-fast);
}
.traffic:hover .traffic__dot::before { opacity: 1; }
.traffic__dot--close::before    { content: '×'; font-size: 11px; }
.traffic__dot--minimize::before { content: '–'; font-size: 11px; }
.traffic__dot--maximize::before { content: '+'; font-size: 11px; }
.traffic__dot:active { transform: scale(0.85); }
.window.unfocused .traffic__dot { background: #3a484e; border-color: transparent; }

.titlebar__title {
    flex: 1;
    text-align: center;
    font-size: var(--byte-fs-sm);
    font-weight: 500;
    color: var(--byte-text-muted);
    font-family: var(--byte-font-mono);
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.titlebar__title i { font-size: 13px; color: var(--byte-text-subtle); }
.window.focused .titlebar__title { color: var(--byte-text); }
.window.focused .titlebar__title i { color: var(--byte-primary); }
.titlebar__tools { display: flex; gap: 4px; min-width: 54px; justify-content: flex-end; }

/* Body & resizer */
.window__body {
    flex: 1;
    overflow: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 0;
    /* SoT-BG für Scroll-Bereich. bodyClass-Wrapper bekommen bei
       flex:1 nur Viewport-Höhe — Content das overflowt, rendert
       OUTSIDE des Wrappers (default overflow:visible) und würde
       sonst auf dem semi-transparenten .window-Glas-BG landen.
       Durchgängig dunkler BG hier macht alle Apps konsistent. */
    background: var(--byte-ink-950);
}
.window__body::-webkit-scrollbar { width: 10px; height: 10px; }
.window__body::-webkit-scrollbar-track { background: transparent; }
.window__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 5px; }
.window__body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

.resizer {
    position: absolute; right: 4px; bottom: 4px;
    width: 14px; height: 14px;
    cursor: nwse-resize;
    border-right: 2px solid var(--byte-text-subtle);
    border-bottom: 2px solid var(--byte-text-subtle);
    border-bottom-right-radius: 4px;
    opacity: 0.4;
    transition: opacity var(--byte-t-fast);
    touch-action: none;
}
.resizer:hover { opacity: 1; }
.window.maximized .resizer { display: none; }

/* Placeholder body (delete when filling in) */
.placeholder {
    padding: 24px 28px;
    color: var(--byte-text-muted);
    font-size: var(--byte-fs-md);
    line-height: 1.6;
    background: var(--byte-surface);
    flex: 1;
}
.placeholder--terminal {
    background: var(--byte-ink-950);
    font-family: var(--byte-font-code);
    color: var(--byte-text);
}
.placeholder__label {
    font-family: var(--byte-font-mono);
    color: var(--byte-primary);
    font-size: var(--byte-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.placeholder__hint {
    margin-top: 16px;
    padding: 12px;
    background: var(--byte-bg-2);
    border-left: 2px solid var(--byte-accent);
    font-size: 13px;
    color: var(--byte-text-muted);
}
.placeholder code {
    font-family: var(--byte-font-code);
    background: var(--byte-surface-2);
    color: var(--byte-accent);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}
.placeholder ul { margin: 8px 0 8px 20px; }
.placeholder li { margin: 4px 0; }