/*
- 开发时间：2026-07-06
- 更新时间：2026-07-08
- 文件作用：cloudPrompt「工作清单」移动端响应式样式（@media max-width:768px）
- 实现原理：从 worklist.css 拆分移动端样式独立管理（治本：worklist.css 拆分后≤500 行符合 P0 规则）；
            包含手机端页签/工具栏/任务卡片/模态对话框/垂直时间轴模式样式；
            垂直时间轴模式：手机端时间从上到下流动（chrome://tracing 垂直版），
            ruler 拆分 spacer+body，.wl-trace-container touch-action:pan-x 仅允许浏览器横向滚动，
            垂直滑动和双指捏合由 worklist_touch.js 处理；
            .wl-trace-pool touch-action:pan-x 显式声明允许横向滚动（避免层级歧义）
- 如何调用：由 worklist.html 通过 <link rel="stylesheet" href="worklist_mobile.css"> 引入（在 worklist.css 之后）
- 所属流程：cloudPrompt 工作清单移动端响应式适配流程
*/

/* 响应式适配：手机端（宽度 ≤ 768px） */
@media (max-width: 768px) {
    .wl-tabs {
        padding: 0 4px;
    }
    .wl-tab {
        padding: 6px 14px;
        font-size: 13px;
    }
    .wl-toolbar {
        padding: 6px 8px;
        gap: 6px;
    }
    .wl-toolbar button {
        padding: 8px 12px;
        font-size: 14px;
    }
    .wl-date-display {
        font-size: 13px;
        font-weight: bold;
    }
    .wl-zoom-controls {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
    .wl-zoom-btn {
        min-width: 44px;
        height: 44px;
        font-size: 20px;
    }
    .wl-trace-container {
        margin: 6px;
        border-radius: 4px;
    }
    .wl-ruler-tick span {
        font-size: 10px;
    }
    .wl-task-card {
        min-height: 58px;
        justify-content: flex-start;
        gap: 1px;
    }
    .wl-task-title {
        font-size: 12px;
    }
    .wl-task-time {
        font-size: 10px;
    }
    .modal-content {
        width: 95%;
        max-width: none;
        border-radius: 6px;
    }
    .modal-body {
        padding: 12px;
        gap: 4px;
    }
    .form-input, .form-textarea {
        padding: 10px;
        font-size: 16px;
    }
    .modal-footer button {
        padding: 8px 12px;
        font-size: 14px;
        white-space: nowrap;
    }
    .title {
        font-size: 20px;
        padding: 8px;
    }

    /* 垂直时间轴模式：手机端时间从上到下流动（chrome://tracing 垂直版）
       - ruler 拆分 spacer+body：spacer 与 lane-header 等高对齐，body 与 lane-track 等高对齐
       - .wl-trace-container touch-action:pan-x 仅允许浏览器横向滚动，垂直滑动和双指捏合由 worklist_touch.js 处理
       - .wl-trace-pool touch-action:pan-x 显式声明允许横向滚动（避免层级歧义，确保工作流横向滚动放行） */
    .wl-trace-container {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        touch-action: pan-x;
    }
    .wl-trace-ruler {
        width: 52px;
        height: 553px;
        margin-top: 0;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        border-bottom: none;
        border-right: 2px solid #0d1452;
    }
    .wl-ruler-spacer { display: block; height: 33px; flex-shrink: 0; }
    .wl-ruler-body { flex: 1; position: relative; }
    .wl-ruler-tick {
        top: auto;
        bottom: auto;
        left: 0;
        right: 0;
        transform: translateY(-50%);
    }
    .wl-ruler-tick::before {
        left: 0;
        top: 50%;
        bottom: auto;
        width: 100%;
        height: 1px;
    }
    .wl-ruler-tick span {
        left: 3px;
        top: 50%;
        transform: translateY(-50%);
    }
    /* 需求1：移动端竖向时间轴当前时间标签放在标记线左端垂直居中（ruler 区域内，红底白字突出显示） */
    .wl-current-time-line .wl-current-time-label {
        top: 50%;
        left: 2px;
        transform: translateY(-50%);
    }
    .wl-trace-pool {
        flex-direction: row;
        overflow-x: auto;
        flex: 1;
        padding: 0;
        touch-action: pan-x;
    }
    .wl-lane {
        min-width: 150px;
        flex-shrink: 0;
    }
    .wl-lane-header {
        height: 31px;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    .wl-lane-track {
        height: 520px;
        background-image: linear-gradient(to bottom, #eee 1px, transparent 1px);
        background-size: 100% 25%;
    }
}