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

/* 窄屏模式：视口 < 1450px，主列 760px，再窄不适配、可横向滚动 */
body:has(#ai-image.panel.active) {
  overflow-x: auto;
}
body:has(#ai-handbook.panel.active) {
  overflow-x: hidden;
}

/*
 * 窄屏 AI 生图布局（已确认固定）
 * 以下 @media (max-width: 1449px) 内 #ai-image 相关样式为最终版，勿随意修改。
 * 任务卡 315px 高、18px 内边距；上传区 180px；提示词与第一张图顶对齐；生成图 118px、间距 11px、底 38px；
 * 绿色选中点在外侧底中；仅改窄屏时勿动宽屏。
 */
@media (max-width: 1449px) {
  body:has(#ai-image.panel.active),
  body:has(#ai-handbook.panel.active) {
    --task-bar-width: var(--ai-image-narrow-width);
  }

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

  /* 窄屏：整体下移 5px，避免标签上的按钮被上方遮挡 */
  #ai-image {
    position: relative;
    padding-top: 5px;
  }

  /* 横线与第一个任务栏间距（总间距 21px）；固定标签栏时该间距已并入 #ai-image 的 padding-top */
  #ai-image .task-list-container {
    margin-top: 15px;
  }
  #ai-image:has(> .task-tabs-shell) .task-list-container {
    margin-top: 0;
  }

  /* 窄屏：任务卡固定宽高，自下向上减少 5px 边框高度 */
  #ai-image .task-card {
    height: 315px;
    min-height: 315px;
    max-height: 315px;
    overflow: auto;
    padding: 18px;
    scrollbar-width: none;
  }
  #ai-image .task-card::-webkit-scrollbar {
    display: none;
  }

  /* 窄屏：上传与提示词同一行，提示词在右侧并垂直居中 */
  #ai-image .task-layout {
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-height: 0;
    overflow: hidden;
  }

  #ai-image .task-layout .upload-panel,
  #ai-image .task-layout .prompt-panel,
  #ai-image .task-layout .result-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* 窄屏：上传参考图区域 180px，左侧；第一个实例框在左上方，与任务栏边框合理留白 */
  #ai-image .task-layout .upload-panel {
    width: 180px;
    max-width: 180px;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    align-self: flex-start;
  }

  /* 窄屏：提示词框与第一张上传图顶部对齐，向上贴齐 */
  #ai-image .task-layout .prompt-panel {
    flex: 1;
    min-width: 0;
    align-self: flex-start;
    margin-top: 2px;
  }

  #ai-image .task-layout .upload-panel::-webkit-scrollbar {
    display: none;
  }
  #ai-image .task-layout .upload-panel {
    scrollbar-width: none;
  }

  /* 窄屏：上传图每排 2 个，首格贴近左上方并与边框留白 */
  #ai-image .upload-grid {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0;
    padding-top: 2px;
  }

  /* 窄屏：隐藏上传说明文案 */
  #ai-image .upload-helper-wrap {
    display: none;
  }

  /* 窄屏：去掉标题和选项文字以提升利用率，功能保留 */
  #ai-image .upload-panel h3,
  #ai-image .result-panel h3,
  #ai-image .prompt-panel h3 {
    display: none;
  }

  #ai-image .prompt-controls-wrap .field-group label {
    display: none;
  }

  /* 窄屏：提示词区域可伸缩，最小高度不撑开 */
  #ai-image .task-layout .prompt-panel {
    min-height: 0;
  }

  #ai-image .task-layout .prompt-panel .prompt-box {
    min-height: 100px;
  }

  #ai-image .prompt-textarea {
    min-height: 96px;
  }

  #ai-image .prompt-toolbar {
    gap: 3px;
    top: 5px;
    right: 5px;
  }
  #ai-image .prompt-toolbar .icon-btn {
    width: 23px;
    height: 23px;
    border-radius: 7px;
    font-size: 12px;
  }
  #ai-image .prompt-toolbar .icon-btn svg {
    width: 12px;
    height: 12px;
  }
  #ai-image .prompt-toolbar .prompt-reverse-btn .reverse-prompt-button-preview-frame {
    border-radius: 6px;
  }
  .prompt-save-tip-append-btn {
    width: 19px;
    height: 19px;
    border-radius: 6px;
  }
  .prompt-save-tip-append-btn .append-tip-main-icon {
    width: 10px;
    height: 10px;
  }
  .prompt-save-tip-append-btn .append-tip-plus {
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
  }
  .prompt-save-tip-append-btn::after {
    right: calc(100% + 6px);
    padding: 4px 8px;
    font-size: 10px;
    border-radius: 9px;
  }

  /* 窄屏：模型、比例上下，清除在比例下方、生成在清除右侧；右侧预留生成图空间 */
  #ai-image .prompt-controls-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-right: 247px;
  }

  /* 模型、比例宽度与下方清除+生成整行同宽，右对齐生图按钮 */
  #ai-image .prompt-controls-wrap .field-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 210px;
    min-width: 210px;
  }

  #ai-image .prompt-controls-wrap .field-group {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
  }

  #ai-image .prompt-controls-wrap .field-group select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 清除/生成按钮底部与任务栏边框距离 18px（仅靠卡片 padding-bottom 实现） */
  #ai-image .prompt-controls-wrap .action-row {
    position: static;
    margin-top: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
  }

  #ai-image .prompt-controls-wrap .action-btn {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    box-sizing: border-box;
  }

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

  /* 窄屏：两张图片顶部与模型选择框上方水平对齐，再下移 3px */
  #ai-image .task-layout .result-panel {
    position: absolute;
    bottom: 38px;
    right: 18px;
    width: 247px;
    max-width: 247px;
    min-width: 247px;
  }

  #ai-image .result-stack {
    flex-direction: row;
    gap: 11px;
    min-width: 0;
  }

  #ai-image .result-item {
    width: 118px;
    max-width: 118px;
    min-width: 0;
    flex: none;
  }

  #ai-image .result-item .result-frame {
    width: 118px;
    max-width: 118px;
    aspect-ratio: 1 / 1;
  }

  #ai-image .result-item:not(:has(.result-frame)) {
    width: 118px;
    height: 118px;
    flex-shrink: 0;
  }

  #ai-image .result-item img {
    max-width: 118px;
    max-height: 118px;
    object-fit: cover;
  }

  /* 窄屏：绿色选中圆点显示在图片框外侧、底部中间 */
  #ai-image .result-item {
    position: relative;
  }

  #ai-image .result-selected-tag {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
  }

  /* 窄屏：计时器放在框内右上角，一排显示 */
  #ai-image .result-item .result-slot-timer {
    position: absolute;
    top: 6px;
    right: 6px;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 0;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.1);
    color: var(--muted);
    opacity: 1;
    white-space: nowrap;
    font-size: 12px;
    z-index: 1;
  }
  html.theme-dark #ai-image .result-item .result-slot-timer {
    background: rgba(255, 255, 255, 0.1);
  }

  /* 窄屏任务栏排版：单行横向滚动；加高容器并允许上方溢出，避免关闭/重命名按钮被裁掉 */
  #ai-image .independent-task-tabs {
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    margin-bottom: 4px;
    padding: 22px 12px 0 12px;
    min-height: 54px;
    box-sizing: border-box;
  }

  /* 仅保留这一条底部分割线（与毛玻璃外壳底边二选一，避免透明时出现双线） */
  #ai-image .independent-task-tabs::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    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: 0;
  }

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

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

}