html {
    height: 100%;
    overflow-x: hidden;
}

body {
    min-height: 100%;
    overflow-x: hidden;
}

@media (max-width: 1024px) {
    .app-container {
        height: 100dvh;
        height: 100vh;
        padding: var(--spacing-md);
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
        padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
        gap: var(--spacing-sm);
    }

    .main-content {
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
        gap: var(--spacing-md);
    }

    .canvas-section {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
        max-height: min(46dvh, 460px);
    }

    .canvas-wrapper {
        flex: 1 1 auto;
        min-height: min(36dvh, 340px);
        max-height: min(46dvh, 460px);
        width: 100%;
    }

    .sidebar {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        align-self: stretch;
    }

    .sidebar-panel {
        flex: 1;
        min-height: 0;
        height: auto;
        max-height: none;
    }

    .sidebar-tab-panel,
    #tab-panel-actions,
    #tab-panel-layers,
    #tab-panel-annotate {
        flex: 1;
        min-height: 0;
        max-height: none;
        overflow: hidden;
    }

    .sidebar-tab-body,
    .actions-panel,
    .layer-panel,
    .annotate-panel {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .app-container {
        padding: var(--spacing-sm);
        padding-left: max(var(--spacing-sm), env(safe-area-inset-left));
        padding-right: max(var(--spacing-sm), env(safe-area-inset-right));
    }

    .main-content {
        gap: var(--spacing-sm);
    }

    .canvas-section {
        max-height: min(42dvh, 400px);
    }

    .canvas-wrapper {
        min-height: min(32dvh, 300px);
        max-height: min(42dvh, 400px);
        border-radius: var(--radius-md);
    }

    .sidebar-panel {
        padding: var(--spacing-sm);
        border-radius: var(--radius-lg);
    }

    .sidebar-tab {
        padding: 8px 6px;
        font-size: 11px;
    }

    .empty-state-message h2 {
        font-size: var(--font-size-lg);
    }

    .canvas-actions {
        gap: var(--spacing-xs);
    }

    .action-btn {
        padding: 10px 14px;
        min-height: 44px;
    }

    .tool-btn {
        padding: 10px;
    }

    .sidebar-prompt-bar {
        padding-top: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .app-container {
        padding: var(--spacing-xs);
        padding-left: max(var(--spacing-xs), env(safe-area-inset-left));
        padding-right: max(var(--spacing-xs), env(safe-area-inset-right));
    }

    .canvas-section {
        max-height: min(38dvh, 320px);
    }

    .canvas-wrapper {
        min-height: min(28dvh, 260px);
        max-height: min(38dvh, 320px);
    }

    .empty-state {
        padding: var(--spacing-md);
        gap: var(--spacing-lg);
    }

    .empty-state-samples {
        width: min(100%, 96vw);
        height: 220px;
    }

    .empty-state-carousel {
        --carousel-card-width: 120px;
        --carousel-card-height: 150px;
        --cover-flow-shift: 88px;
        --cover-flow-scale-side: 0.86;
        --cover-flow-scale-hidden: 0.74;
        --carousel-drag-step: 56px;

        grid-template-columns: 32px 1fr 32px;
        gap: var(--spacing-xs);
    }

    .empty-state-carousel__nav {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .empty-state-carousel__stage {
        perspective: 900px;
    }

    .empty-state-sample-card {
        border-radius: var(--radius-sm);
    }

    .empty-state-message {
        padding-bottom: 0;
    }

    .empty-state-message h2 {
        font-size: var(--font-size-base);
        line-height: 1.35;
    }

    .empty-state-message p {
        font-size: var(--font-size-sm);
    }

    .sidebar-tabs {
        gap: 2px;
        padding: 3px;
    }

    .sidebar-tab {
        padding: 7px 4px;
        font-size: 10px;
        letter-spacing: -0.01em;
    }

    .tool-info h4 {
        font-size: var(--font-size-sm);
    }

    .tool-info p {
        font-size: var(--font-size-xs);
    }

    .grade-style-list {
        grid-template-columns: 1fr;
    }

    .grade-style-chip {
        min-height: 44px;
    }

    .btn-apply,
    .sidebar-prompt-apply {
        min-height: 44px;
    }

    .annotate-delete {
        width: 44px;
        height: 44px;
    }

    .canvas-upload-new {
        left: var(--spacing-sm);
        bottom: var(--spacing-sm);
        font-size: var(--font-size-xs);
        padding: 8px 12px;
    }
}

@media (hover: none) and (pointer: coarse) {
    .canvas-upload-new {
        opacity: 1;
        pointer-events: auto;
        transform: none;
    }
}

@media (max-width: 768px) {
    .app-toast-host {
        bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
        width: min(420px, calc(100vw - var(--spacing-md) * 2));
    }
}