/* 温馨像素风配色引擎 */
:root {
    --px-bg: #cce0eb;
    --px-window: #fffaf0;
    --px-border: #625555;
    --px-primary: #93bbf4;
    --px-primary-hover: #7ba8e8;
    --px-error: #e78282;
    --px-error-hover: #d26a6a;
    --px-success: #a7d995;
    --px-warning: #fce28b;
    --px-shadow: #c5baba;
}

/* Read-only WebUI accounts keep the original layout but see only the
   collaboration queue; the backend independently rejects write APIs. */
.readonly-display > .p-6 > section:not(.pipeline-section) {
    display: none !important;
}

body {
    font-family: 'Zpix', 'Press Start 2P', monospace;
    image-rendering: pixelated;
    background: var(--px-bg);
    color: var(--px-border);
    padding: 20px;
}

.login-screen {
    min-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-panel {
    width: min(100%, 540px);
}

.login-warning {
    background: #fff1d7;
    color: #8a4b1f;
}

.pixel-border { background: var(--px-window); border: 4px solid var(--px-border); box-shadow: -4px 0 var(--px-border), 0 -4px var(--px-border), 4px 0 var(--px-border), 0 4px var(--px-border), inset -4px -4px var(--px-shadow); margin: 8px; }
.pixel-btn { padding: 8px 16px; margin: 4px; background: white; border: 4px solid var(--px-border); cursor: pointer; font-size: 14px; box-shadow: inset -4px -4px var(--px-shadow); transition: transform 0.1s; color: var(--px-border); }
.pixel-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: inset 4px 4px var(--px-shadow); }
.pixel-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pixel-btn-blue { background: var(--px-primary); color: white; box-shadow: inset -4px -4px var(--px-primary-hover); }
.pixel-btn-red { background: var(--px-error); color: white; box-shadow: inset -4px -4px var(--px-error-hover); }
.pixel-input { width: 100%; border: 4px solid var(--px-border); padding: 8px; background: white; outline: none; font-family: inherit; color: var(--px-border); }
.pixel-input:focus { background: #fdf5e6; }
.pixel-inset-container { background: #ffffff; border: 4px solid var(--px-border); box-shadow: inset 4px 4px var(--px-shadow); padding: 4px; }
.blink { animation: blinker 0.8s steps(2, start) infinite; }
@keyframes blinker { to { visibility: hidden; } }
.window-header { background: var(--px-border); color: var(--px-window); padding: 6px 12px; margin: -4px -4px 10px -4px; display: flex; justify-content: space-between; }
.pixel-checkbox { appearance: none; width: 16px; height: 16px; border: 2px solid var(--px-border); background: white; cursor: pointer; position: relative; }
.pixel-checkbox:checked { background: var(--px-primary); }
.pixel-checkbox:checked::after { content: 'x'; position: absolute; top: -5px; left: 2px; color: white; font-size: 14px; }
[v-cloak] { display: none; }

/* 任务类型悬浮战术板 */
.task-type-badge {
    color: #5D8AA8;
    border-bottom: 1px dashed #5D8AA8;
    cursor: help;
    position: relative;
    display: inline-block;
}
.task-type-badge::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2D2D2D;
    color: #E0E0E0;
    border: 2px solid #888;
    padding: 8px 12px;
    font-family: monospace;
    font-size: 12px;
    white-space: pre;
    text-align: left;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    z-index: 2147483000;
}
.task-type-badge:hover::after { opacity: 1; visibility: visible; }

/* 协作队列的“内存直播 + 磁盘镜像编码”：公开 HLS 的内存副本仍为紫色，
 * 已转存到私有磁盘镜像树的物理 TS 占用单独显示为绿色虚线。 */
.task-type-badge.pipeline-disk-buffer-badge {
    color: #09e30d !important;
    border-bottom-color: #09e30d !important;
}

/* 远端对象存储：当前仍显示前排内存蓄水池容量，但用橙色虚线与
 * 内存全流程（紫）和磁盘镜像（绿）区分。 */
.task-type-badge.pipeline-object-buffer-badge {
    color: #e67e22 !important;
    border-bottom-color: #e67e22 !important;
}

/* 内存盘战术子面板 */
.tactical-sub-panel {
    margin-top: 10px; padding: 12px;
    border-left: 4px solid #5D8AA8; 
    background-color: rgba(93, 138, 168, 0.1);
    transition: all 0.3s ease-in-out;
}
.highlight-label { color: #5D8AA8; cursor: pointer; font-weight: bold; }
.mini-input { width: 70px !important; text-align: center; }

/* 通用硬核像素悬浮提示器 */
.pixel-tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.pixel-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2d2a2a;
    color: #fffaf0;
    border: 2px solid var(--px-border);
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-in-out;
    z-index: 2147483000;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}
.pixel-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}
.pixel-tooltip:hover, 
.task-type-badge:hover {
    z-index: 100002;
}

/* 当前页面内的 Video.js 播放覆盖层：背景不抢占页面布局，关闭后回到原窗口。 */
.video-player-overlay {
    background: rgba(0, 0, 0, 0.72);
}
.video-player-overlay-panel {
    position: relative;
    width: min(1120px, 92vw);
    background: #000;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.58);
}
.video-player-overlay-panel .video-js {
    width: 100%;
    background: #000;
}
.video-player-overlay-close {
    position: absolute;
    top: -40px;
    right: 0;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
.video-player-overlay-close:hover { background: #dc2626; }

/* 手机竖屏时先显示完整的 16:9 画面；横屏按钮位于 Video.js 控制栏，
   进入系统全屏后由浏览器按真实屏幕比例自动铺满。 */
@media (max-width: 640px) {
    .video-player-overlay { padding: 12px; }
    .video-player-overlay-panel { width: 100%; max-width: none; }
    .video-player-overlay-close { top: -38px; }
}
.video-player-overlay-panel:fullscreen,
.video-player-overlay-panel:-webkit-full-screen {
    width: 100vw;
    max-width: none;
    height: 100vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-player-overlay-panel:fullscreen .video-js,
.video-player-overlay-panel:-webkit-full-screen .video-js {
    width: 100%;
    max-height: 100vh;
}
.video-js:fullscreen,
.video-js:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    padding-top: 0 !important;
    background: #000;
}
.video-js:fullscreen .vjs-tech,
.video-js:-webkit-full-screen .vjs-tech { object-fit: contain; }
.video-player-overlay-panel:fullscreen .video-player-overlay-close,
.video-player-overlay-panel:-webkit-full-screen .video-player-overlay-close { display: none; }

/* 画中画收进播放器右侧控制区，和全屏按钮并排。 */
.vjs-control-bar .vjs-overlay-quick-control {
    flex: 0 0 3em;
    width: 3em;
}
.vjs-overlay-quick-control .vjs-overlay-quick-icon {
    display: block;
    font-size: 1.5em;
    line-height: 2.15em;
    font-family: sans-serif;
}
.vjs-overlay-quick-control:hover .vjs-overlay-quick-icon,
.vjs-overlay-quick-control:focus .vjs-overlay-quick-icon { color: #f7d154; }
@media (max-width: 640px) {
    .vjs-control-bar .vjs-overlay-quick-control {
        flex-basis: 3em;
        width: 3em;
    }
    .vjs-overlay-quick-control .vjs-overlay-quick-icon { font-size: 1.5em; }
}

/* ========================================= */
/* 🌟 终极视觉：破框而出的越界 GIF 引擎 */
/* ========================================= */
.status-gif {
    display: inline-flex;
    
    /* 1. 物理占位保持极小，绝对不撑开表格行高 */
    width: 45px;   
    height: 45px;  
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    vertical-align: middle;
    
    /* 2. 🌟 视觉破框核心连招 */
    position: relative;
    z-index: 12;           /* 提升 Z 轴层级，强行盖住上下两行的边框 */
    transform: scale(1.35); /* 视觉强行放大 2.8 倍！(数值越大，溢出行外的部分越多) */
    
    /* 3. 战术微调：留出空隙，防止变大的图片挡住后面的文字 */
    margin-right: 18px;    
    margin-left: 5px;
    margin-top: -4px;      /* 稍微向上偏移一点，居中对齐 */
    
    /* 4. 防御机制：避免巨型动图的透明区域遮挡上下两行按钮的点击 */
    pointer-events: none;  
    align-items: center;
    justify-content: center;
}
.status-gif:hover {
    transform: scale(1.15); /* 鼠标悬停时放大提示 */
}
.status-gif-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
}
.status-gif-fallback {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #5f2ab7;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    word-break: break-word;
}

/* ========================================= */
/* 响应式与触屏增强 */
/* ========================================= */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }

.task-table-wrap {
    position: relative;
    overflow-x: auto !important;
    overflow-y: visible;
    max-width: 100%;
    padding-bottom: 48px !important;
    -webkit-overflow-scrolling: touch;
}
.task-table {
    position: relative;
    min-width: 900px;
    overflow: visible;
}
.pipeline-demo-table {
    /* 与 task-drag-demo.html 共用的原版列宽；只影响协作编码队列表格。 */
    min-width: 1450px;
    table-layout: fixed;
}
.pipeline-demo-table th:nth-child(1),
.pipeline-demo-table td:nth-child(1) { width: 5%; }
.pipeline-demo-table th:nth-child(2),
.pipeline-demo-table td:nth-child(2) { width: 14%; }
.pipeline-demo-table th:nth-child(3),
.pipeline-demo-table td:nth-child(3) { width: 19%; }
.pipeline-demo-table th:nth-child(4),
.pipeline-demo-table td:nth-child(4) { width: 19%; }
.pipeline-demo-table th:nth-child(5),
.pipeline-demo-table td:nth-child(5) { width: 10%; }
.pipeline-demo-table th:nth-child(6),
.pipeline-demo-table td:nth-child(6) { width: 15%; }
.pipeline-demo-table th:nth-child(7),
.pipeline-demo-table td:nth-child(7) { width: 18%; }
.pipeline-demo-table .pipeline-parent-row > td { min-height: 112px; }
.pipeline-demo-table .pipeline-session-row > td { min-height: 92px; }
.pipeline-demo-table .pipeline-parent-row td,
.pipeline-demo-table .pipeline-session-row td { vertical-align: middle; }
.pipeline-demo-table .pipeline-parent-row .task-type-badge,
.pipeline-demo-table .pipeline-session-row .task-type-badge { white-space: nowrap; }
.pipeline-demo-table .pipeline-parent-row .status-gif,
.pipeline-demo-table .pipeline-session-row .status-gif { margin-top: 2px; }
.pipeline-demo-table .pipeline-parent-row { cursor: grab; touch-action: none; user-select: none; }
.pipeline-demo-table .pipeline-parent-row.task-row-dragging { cursor: grabbing; }
.pipeline-demo-table .task-row-drag-over { box-shadow: inset 0 -4px 0 #7b3fbd; }
.pipeline-demo-table .task-row-dragging { opacity: 0.45; background: #dcecff; }
.task-table th,
.task-table td,
.file-table th,
.file-table td {
    position: relative;
    overflow: visible;
}
.task-row { border-bottom: 2px dashed var(--px-shadow); transition: background-color 0.12s, opacity 0.12s; }
.pipeline-parent-row { border-bottom-style: solid; }
.pipeline-session-row {
    background: rgba(247, 241, 255, 0.55);
    border-bottom: 2px dotted var(--px-shadow);
}
.pipeline-session-row td {
    color: #5f5570;
}
.task-row:hover,
.file-table tr:hover {
    position: relative;
    z-index: 100000;
}
.task-table td:hover,
.task-table th:hover,
.file-table td:hover,
.file-table th:hover {
    z-index: 100001;
}
.task-row-dragging { opacity: 0.45; background: #dcecff; }
.task-row-drag-over { box-shadow: inset 0 -4px 0 #7b3fbd; }
.task-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    font-size: 18px;
}
.task-drag-handle:hover { transform: scale(1.18); }
.task-drag-handle:active { cursor: grabbing; }
.metric-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    max-width: 150px;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
}
.metric-stack > div {
    white-space: normal;
}

/* 活跃录制任务：压缩基础信息列，将更多横向空间留给运行指标。 */
.record-task-table {
    table-layout: fixed;
    min-width: 980px;
}
.record-task-table .record-task-name-column { width: 14%; }
.record-task-table .record-task-node-column { width: 9%; }
.record-task-table .record-task-type-column { width: 11%; }
.record-task-table .record-task-status-column { width: 8%; }
.record-task-table .record-task-metrics-column { width: 18%; }
.record-task-table .record-task-metrics-column .metric-stack {
    max-width: none;
}

.scroll-name-viewport,
.record-task-id-viewport {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    container-type: inline-size;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 14px), transparent 100%);
}
.record-task-id-draggable {
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    border-bottom: 2px dashed rgba(123, 63, 189, 0.45);
}
.record-task-id-draggable:hover {
    background: rgba(123, 63, 189, 0.08);
}
.record-task-id-draggable:active,
.record-task-id-dragging {
    cursor: grabbing;
    background: rgba(220, 236, 255, 0.9);
}
.scroll-name-track,
.record-task-id-track {
    display: inline-block;
    min-width: max-content;
    white-space: nowrap;
    will-change: transform;
}
.scroll-name-viewport:hover .scroll-name-track.is-overflowing,
.record-task-id-viewport:hover .record-task-id-track.is-overflowing {
    animation: record-task-id-scroll 4s ease-in-out 0.25s infinite alternate;
}
@keyframes record-task-id-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(min(0px, calc(100cqw - 100%))); }
}

[data-tooltip].tooltip-open::after,
.pixel-tooltip:focus::after,
.task-type-badge:focus::after,
.pixel-tooltip:active::after,
.task-type-badge:active::after {
    opacity: 1;
    visibility: visible;
}

[data-tooltip]:hover,
[data-tooltip].tooltip-open,
.pixel-tooltip:hover,
.pixel-tooltip:focus,
.task-type-badge:hover,
.task-type-badge:focus {
    position: relative;
    z-index: 100002 !important;
}

[data-tooltip]:not(.pixel-tooltip):not(.task-type-badge) {
    position: relative;
}
[data-tooltip]:not(.pixel-tooltip):not(.task-type-badge)::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #2d2a2a;
    color: #fffaf0;
    border: 2px solid var(--px-border);
    padding: 4px 8px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-in-out;
    z-index: 2147483000;
    box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);
}
[data-tooltip]:not(.pixel-tooltip):not(.task-type-badge):hover::after,
[data-tooltip]:not(.pixel-tooltip):not(.task-type-badge):focus::after,
[data-tooltip]:not(.pixel-tooltip):not(.task-type-badge).tooltip-open::after {
    opacity: 1;
    visibility: visible;
}

/* 全局悬浮提示层：脱离表格/滚动容器，避免被边框或 overflow 裁剪 */
.tooltip-portal-source::after {
    display: none !important;
}
.global-tooltip-portal {
    position: fixed;
    left: 0;
    top: 0;
    max-width: min(720px, calc(100vw - 24px));
    background-color: #2d2a2a;
    color: #fffaf0;
    border: 2px solid var(--px-border);
    padding: 8px 12px;
    font-family: monospace;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    text-align: left;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    z-index: 2147483647;
}
.global-tooltip-portal.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    body { padding: 6px; font-size: 13px; }
    .app-shell, .pixel-border { width: 100%; margin: 4px 0; border-width: 3px; }
    .window-header { flex-wrap: wrap; gap: 4px; font-size: 12px; line-height: 1.5; }
    .pixel-btn { padding: 6px 8px; margin: 2px; font-size: 12px; }
    .pixel-input { padding: 6px; font-size: 12px; }
    #app .p-6 { padding: 12px !important; }
    .control-switch-row, .main-input-row, .section-title-row { flex-wrap: wrap; gap: 6px; }
    .main-input-row > input, .main-input-row > button { width: 100%; flex: 1 1 100%; }
    .task-table { min-width: 760px; font-size: 12px; }
    .task-table th, .task-table td { padding: 8px 6px !important; }
    .status-gif { width: 32px; height: 32px; transform: scale(1.05); margin-right: 4px; }

    .pixel-tooltip::after,
    .task-type-badge::after,
    [data-tooltip]:not(.pixel-tooltip):not(.task-type-badge)::after {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: 16px;
        top: auto;
        transform: translateX(-50%);
        max-width: calc(100vw - 24px);
        white-space: pre-wrap;
        text-align: left;
        z-index: 999999;
    }

    .fixed.inset-0 { padding: 8px !important; align-items: flex-start !important; overflow-y: auto; }
    .fixed.inset-0 .pixel-border { max-width: 100% !important; margin-top: 8px; }
    .grid.grid-cols-2, .grid.grid-cols-3 { grid-template-columns: 1fr !important; }
}
.file-table { min-width: 750px; }
@media (max-width: 768px) {
    .file-table { min-width: 680px; font-size: 12px; }
    .file-table th, .file-table td { padding: 8px 6px !important; }
}
:root {