/* Extracted from index.html. AI image wide viewport layout overrides. */

/* 宽屏模式：视口 >= 1450px，固定宽度 1280px，拉窄不重排、可横向滚动 */
@media (min-width: 1450px) {
  body:has(#ai-image.panel.active),
  body:has(#ai-handbook.panel.active) {
    --task-bar-width: var(--ai-image-wide-width);
  }

  /* 宽屏下主导航与下方内容同宽 */
  body:has(#ai-image.panel.active) .nav-inner,
  body:has(#ai-handbook.panel.active) .nav-inner {
    max-width: var(--ai-image-wide-width);
  }

  /* 宽屏：任务栏向右多 20px，功能区在「恢复任务」右侧（左移 20px 后为 +10），下移 45px */
  body:has(#ai-image.panel.active) .left-float-bar {
    left: calc((100vw + var(--task-bar-width)) / 2 + 10px);
    right: auto;
    top: 116px;
  }

  /* 宽屏任务栏排版：轨道较内层 +20px 右伸（与原先 100%+20 / 负 margin 等效），水平位置与主列对齐 */
  #ai-image .task-tabs-shell > .independent-task-tabs {
    width: calc(var(--tab-inner-w) + 20px);
    max-width: calc(100vw - 40px + 20px);
    margin-left: calc((100vw - var(--tab-inner-w)) / 2);
    margin-right: calc((100vw - var(--tab-inner-w)) / 2 - 20px);
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 4px;
    padding: 0 12px 0 12px;
    min-height: 68px;
    box-sizing: border-box;
  }

  .ai-speed-broadcast {
    max-width: 320px;
  }

  #ai-image .independent-task-tabs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 20px;
    bottom: 0;
    height: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 9%, transparent);
    pointer-events: none;
  }

  #ai-image .independent-task-tab.add {
    margin-left: 0;
    padding: 8px 12px;
  }

  #ai-image .independent-task-tab.restore {
    margin-right: 12px;
  }

  #ai-image .independent-task-tabs-spacer {
    flex: 1;
    min-width: 12px;
  }

  #ai-image .independent-task-tab.restore {
    flex-shrink: 0;
    margin-right: 20px;
  }

  /* 宽屏：不显示「生成两张」按钮 */
  #ai-image .generate-two-btn {
    display: none !important;
  }

  body:has(#ai-image.panel.active) .container,
  body:has(#ai-handbook.panel.active) .container {
    width: var(--ai-image-wide-width);
    min-width: var(--ai-image-wide-width);
    max-width: var(--ai-image-wide-width);
  }

  .container {
    max-width: 1470px;
  }

  body:has(#ai-case-tips.panel.active) .container {
    width: 1000px;
    max-width: 1000px;
  }

  #ai-image.panel.active {
    padding-bottom: 24px;
  }

  .task-card {
    height: auto;
    min-height: 340px;
    padding: 16px;
  }

  .task-layout {
    gap: 20px;
    flex-wrap: nowrap;
  }

  .upload-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .upload-panel h3,
  .prompt-panel h3,
  .result-panel h3 {
    margin-bottom: 8px;
  }

  .prompt-box {
    min-height: 220px;
  }

  .prompt-textarea {
    min-height: 194px;
  }

  .prompt-controls-wrap {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
  }

  .prompt-controls-wrap .field-row {
    display: contents;
    margin-top: 0;
  }

  .prompt-controls-wrap .action-row {
    margin-top: 0;
    margin-left: auto;
  }

  .prompt-controls-wrap .field-group {
    min-width: 120px;
  }

  .result-stack {
    flex-direction: row;
    gap: 10px;
  }

  .result-item {
    width: auto;
    flex: 1;
    min-width: 0;
    margin: 0;
  }
}