/* 手机端（≤768px）顶部栏与浮层修补。
   不改动打包产物，由派生镜像注入 index.html 末尾加载，index.html 本身是 no-cache，
   所以改这个文件后刷新页面即可生效。
   规则一律用 !important：需要压过打包后 Tailwind 工具类和 globals-*.css 的既有声明。 */

@media (max-width: 768px) {
    /* 顶部栏：强制单行，溢出裁掉，避免标题被挤成一字一行 */
    .app-workspace-topbar {
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        gap: 6px !important;
        padding-inline: 10px !important;
    }

    /* 面包屑占满剩余空间并省略；前缀「影策 /」与分隔符在窄屏没有价值 */
    .app-workspace-topbar-breadcrumb {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        align-items: center !important;
        gap: 4px !important;
        overflow: hidden !important;
        white-space: nowrap !important;
    }
    .app-workspace-topbar-breadcrumb > a,
    .app-workspace-topbar-breadcrumb > span[aria-hidden] {
        display: none !important;
    }
    .app-workspace-topbar-breadcrumb > * {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* 页面内工具条（「画布中继续」等）不抢宽度，必要时整体收缩 */
    .app-workspace-topbar-extension {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* 右侧操作区：紧凑化，保证不换行 */
    .app-workspace-topbar-actions {
        flex: 0 0 auto !important;
        gap: 2px !important;
    }
    .app-workspace-topbar-icon-button {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    .app-workspace-topbar-credit-pill {
        height: 32px !important;
        padding-inline: 8px !important;
        gap: 4px !important;
    }

    /* 浮动面板在窄屏不要超出屏幕 */
    .canvas-agent-panel,
    .canvas-agent-panel-body {
        max-width: calc(100vw - 16px) !important;
    }
}

@media (max-width: 480px) {
    /* 小屏手机上让出宽度给页面标题：隐藏页面内工具条 */
    .app-workspace-topbar-extension {
        display: none !important;
    }
    .app-workspace-topbar {
        padding-inline: 8px !important;
        gap: 4px !important;
    }
    .app-workspace-topbar-icon-button {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
    }
}

/* 触屏上把顶部栏与底部输入区留出安全区，避免被刘海/横条压住 */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .app-workspace-topbar {
            padding-top: env(safe-area-inset-top) !important;
            height: auto !important;
            min-height: var(--workspace-reference-topbar) !important;
        }
    }
}