/* ==========================================================================
   ai2-ui-patch.css
   无限画布 · UI 结构补丁（模型选择器/Logo/下载按钮等）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 模型选择器：带标题 + 右侧滚动条
   -------------------------------------------------------------------------- */
.option-popover-model-scroll {
  width: 280px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.option-popover-head {
  flex: 0 0 auto;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: #667078;
  background: #f7f8fa;
  border-bottom: 1px solid #e3e7ea;
  border-radius: var(--ai2-r) var(--ai2-r) 0 0;
}
.option-popover-scroll {
  flex: 1 1 auto;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
}
.option-popover-scroll::-webkit-scrollbar {
  width: 5px;
}
.option-popover-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.option-popover-scroll::-webkit-scrollbar-thumb {
  background: #ccd3d9;
  border-radius: 999px;
}
.option-popover-scroll button {
  width: 100%;
  min-height: 38px;
}

/* --------------------------------------------------------------------------
   2. 画布底部中间的胶囊工具条（.canvas-dock）
   把原来散在四处的入口收成一行 icon：适应视图 / API 设置 / 运行日志 / 画布历史 / 放大 / 缩小。
   放大缩小适应视图直接控画布；API 设置、运行日志、画布历史都是点了才弹出的浮层。
   -------------------------------------------------------------------------- */
.canvas-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 260;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid #e3e7ea;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(24, 32, 38, .14);
}

.canvas-dock-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #667078;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.canvas-dock-btn:hover,
.canvas-dock-btn:focus-visible {
  background: #f1f3f5;
  color: #171a1d;
  outline: none;
}

.canvas-dock-btn.active {
  background: #eef1ff;
  color: #3f55c4;
}

/* 运行日志图标右上角那个点：实时反映状态（跑=蓝 / 成功=绿 / 失败=红 / 普通=灰）。 */
.canvas-dock-btn[data-state]::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa2a9;
  box-shadow: 0 0 0 2px #fff;
}

.canvas-dock-btn[data-state="success"]::after { background: #24a874; }
.canvas-dock-btn[data-state="error"]::after { background: #d94b55; }
.canvas-dock-btn[data-state="running"]::after { background: #526df5; }

/* 适应视图的图标是图片资源（透明底黑字形），按按钮尺寸缩放。 */
.canvas-dock-fit-icon {
  width: 22px;
  height: auto;
  display: block;
  pointer-events: none;
}

/* 三个浮层统一贴在胶囊条上方，间距一致（86px = 胶囊条 18px + 高 52px + 间隙 16px，
   和画布历史原来的间距对齐）：
   选择器带 .app-shell / body 是为了压过 restyle 里同样带 !important 的 #root 规则。 */
#root .app-shell .run-log-panel {
  transform-origin: 50% 100%;
  top: auto !important;
  bottom: 86px !important;
  left: 50% !important;
  /* 居中用独立的 translate 属性，完全不碰 transform：
     transform 上只要带了 !important（哪怕是 none）就会压过动画里的 transform，位移播不出来。 */
  translate: -50% 0;
  max-height: min(52vh, 420px) !important;
  animation: ai2-dock-pop 180ms cubic-bezier(.22, .8, .25, 1) backwards;
}

/* API 设置是居中浮层：底对齐 + 留出同样的间距，下沿不会贴住胶囊条。 */
#root .app-shell .settings-overlay {
  align-items: end !important;
  padding-bottom: 86px !important;
  animation: ai2-dock-fade 160ms ease-out backwards;
}

#root .app-shell .settings-panel {
  transform-origin: 50% 100%;
  max-height: min(760px, calc(100vh - 108px)) !important;
  animation: ai2-dock-pop 180ms cubic-bezier(.22, .8, .25, 1) backwards;
}

/* 画布历史插件的根节点固定在右下角，改成居中贴胶囊条上方；间距由面板自身的 margin-bottom 补上。 */
body #ai2-canvas-history-root {
  right: auto !important;
  left: 50% !important;
  bottom: 86px !important;
  transform: translateX(-50%) !important;
}

body #ai2-canvas-history-root .ai2-canvas-panel {
  margin-bottom: 0 !important;
  transform-origin: 50% 100%;
}

/* 画布历史：列表只显示两条，其余在列表里滚动（面板不再被撑高、也不会裁掉）。 */
body #ai2-canvas-history-root .ai2-history-list {
  max-height: 240px;
  overflow-y: auto;
  padding-right: 4px;
}

body #ai2-canvas-history-root .ai2-history-list::-webkit-scrollbar {
  width: 5px;
}

body #ai2-canvas-history-root .ai2-history-list::-webkit-scrollbar-track {
  background: transparent;
}

body #ai2-canvas-history-root .ai2-history-list::-webkit-scrollbar-thumb {
  background: #ccd3d9;
  border-radius: 999px;
}

/* API 设置：底部那排「保存设置 / 测试 API 链接 / 查询额度 / 删除平台」吸在滚动区底部，
   不再被下面的说明文字挤到看不见的地方。 */
#root .app-shell .settings-form .settings-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 10px 0 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--ai2-surface, #fff) 36%);
}

/* API 设置：左侧平台栏要跟右侧表单一样高，否则中间那条竖分隔线会「断」在半空。 */
#root .app-shell .settings-grid > .platform-list {
  align-self: stretch !important;
  min-height: 100% !important;
}

#root .app-shell .run-log-panel .log-item {
  animation: ai2-log-rise 160ms cubic-bezier(.22, .8, .25, 1) backwards;
}

/* 注意：居中是在根节点上用 translateX(-50%) 做的，面板自己没有任何水平位移，
   所以这里必须用「纯纵向」的关键帧——用居中那版会让 X 从 -50% 一路滑回 0，
   看起来就是从左向右飞进来。 */
body #ai2-canvas-history-root .ai2-canvas-panel.is-open {
  animation: ai2-dock-pop 180ms cubic-bezier(.22, .8, .25, 1) backwards;
}

/* 胶囊条上浮层的统一入场：从胶囊条方向往上长出来（底部为缩放原点 + 位移 18px + 淡入）。
   居中的那版把 translateX(-50%) 一起写进关键帧，否则动画期间会左右跳。 */
@keyframes ai2-dock-pop {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.96);
  }
}

@keyframes ai2-dock-pop-centered {
  from {
    opacity: 0;
    transform: translate(-50%, 18px) scale(.96);
  }
}

/* 运行日志里的每条小通知也从下往上冒出来（新条目才会播，React 按 id 复用旧节点）。 */
@keyframes ai2-log-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes ai2-dock-fade {
  from {
    opacity: 0;
  }
}

/* 旧入口下线：React Flow 自带的缩放控件、画布历史的小圆钮。 */
.react-flow__controls {
  display: none !important;
}

#ai2-canvas-history-root .ai2-fab-wrap {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .canvas-dock-btn { transition: none; }

  #root .app-shell .run-log-panel,
  #root .app-shell .settings-overlay,
  #root .app-shell .settings-panel,
  #root .app-shell .run-log-panel .log-item,
  body #ai2-canvas-history-root .ai2-canvas-panel.is-open {
    animation: none !important;
  }
}