@media (max-width: 768px) {
    :root { --sidebar-width: 56px; }

    .app-container {
        min-width: 0;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    }

    .app-main,
    .content-area,
    .view-content {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .sidebar {
        width: 56px;
        scrollbar-gutter: auto;
    }

    .nav-link {
        justify-content: center;
        gap: 0;
        padding: 14px 0;
    }

    .nav-link > span,
    .nav-arrow,
    .nav-submenu {
        display: none;
    }

    .nav-icon { flex: 0 0 28px; }

    .app-header {
        min-width: 0;
        padding: 0 10px;
    }

    .app-title { gap: 6px; }
    .app-header .header-logo-container { width: 34px; height: 24px; }
    .app-subtitle { display: none; }
    .title-main { font-size: 16px; }

    .app-status { min-width: 36px; }
    .user-menu__name,
    .user-menu__chevron { display: none; }
    .user-menu__trigger { min-width: 36px; padding: 0; }

    .workshop-container {
        width: auto;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        padding: 48px 10px 20px;
    }

    .workshop-card { min-width: 0; }

    .input-toolbar {
        min-width: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
    }

    .toolbar-left,
    .toolbar-right {
        width: 100%;
        min-width: 0;
    }

    .toolbar-left {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #creative-workshop-view .workshop-container,
    #creative-workshop-view .workshop-card,
    #creative-workshop-view .topic-input,
    #creative-workshop-view .input-toolbar {
        width: auto;
        max-width: 100%;
        min-width: 0;
    }

    .toolbar-btn {
        min-width: 0;
        justify-content: center;
        overflow: hidden;
    }

    .toolbar-right,
    .generate-btn { width: 100%; }
}