/* ════ TOP HEADER ════ */
#toolHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 1000;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(var(--bg-rgb), 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

/* ════ TOOL LAYOUT ════ */
#toolView {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.tool-content {
    flex: 1;
    position: relative;
    z-index: 5;
}

/* Responsive View Logic */
.mobile-view {
    display: none;
}

.desktop-view {
    display: none;
}

@media (max-width: 650px) {
    body {
        overflow: hidden;
        height: 100svh;
    }

    #toolView {
        height: 100svh;
    }

    #landingView {
        height: 100svh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tool-content {
        height: calc(100svh - var(--dock-height) - var(--safe-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 20px;
    }

    .mobile-view {
        display: block;
    }
}

@media (min-width: 651px) {
    .desktop-view {
        display: block;
    }

    .tool-content {
        overflow-y: auto;
        height: 100vh;
    }

    #landingView {
        overflow-y: auto;
        height: 100vh;
    }

    .desktop-only {
        display: flex !important;
    }
}

.desktop-only {
    display: none;
}

/* ════ MOBILE & PREVIEW MODE ════ */
@media (max-width: 650px),
(min-width: 651px) {
    body.mobile-preview {
        overflow: hidden !important;
        height: 100svh !important;
        position: fixed;
        width: 100%;
    }

    body.mobile-preview #toolView {
        height: 100svh;
        width: 100%;
    }

    body.mobile-preview .tool-content {
        height: calc(100svh - var(--dock-height) - 64px);
        overflow-y: auto;
        padding-bottom: 20px;
    }

    body.mobile-preview .mobile-view {
        display: flex !important;
    }

    body.mobile-preview .desktop-view,
    body.mobile-preview .desktop-only:not(#viewToggleBtn) {
        display: none !important;
    }

    body.mobile-preview .bottom-nav-wrap {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 85px;
        padding-bottom: env(safe-area-inset-bottom, 20px);
        background: rgba(var(--bg-rgb), 0.95);
        backdrop-filter: blur(20px);
        z-index: 2000;
        display: flex !important;
    }

    body.mobile-preview #toolHeader {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
    }
}

.tool-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tab-view {
    display: none;
    animation: fadeIn 0.3s ease;
    padding-top: 80px;
    padding-bottom: 120px;
}

.tab-view.active {
    display: block;
}