@import url("./sizes.css");

/* === 左侧卡片与功能（Cards） === */
/* 卡片容器：基础外观（白底/圆角/边框）与固定宽度 */

.function-selection, /* 左侧卡片容器（功能选择） */
.function-params { /* 左侧卡片容器（参数面板） */
  background-color: var(--left-card-bg); /* 背景色（白） */
  border-radius: var(--card-radius); /* 圆角 */
  padding: var(--card-padding); /* 内边距 */
  border: var(--card-border) solid var(--left-card-border); /* 外边框 */
  width: var(--left-card-width) !important; /* 固定宽度 */
  min-width: var(--left-card-width) !important; /* 最小宽度 */
  max-width: var(--left-card-width) !important; /* 最大宽度 */
  box-sizing: border-box; /* 边框与内边距计入盒模型 */
}

/* 顶部 Tabs：容器与状态 */
/* 功能区主卡片：用于承载各工具按钮与表单 */
.function-selection { 
  position: relative; /* 作为伪元素与绝对定位子元素的参照 */
  overflow: visible; /* 允许 Tabs 在卡片上沿之外可见 */
  margin-top: var(--tabs-offset-y); /* Tabs 与卡片之间的视觉外凸高度 */
  padding-top: var(--card-padding); /* 与卡片内边距保持一致 */
  border-top-left-radius: 0; /* 去除左上圆角（与 Tabs 无缝衔接） */
  border-top-right-radius: 0; /* 去除右上圆角（与 Tabs 无缝衔接） */
  box-shadow: 0px 10px 10px 5px rgba(228, 232, 234, 0.75); /* 恢复卡片阴影 */
  border-bottom-left-radius: var(--card-radius) !important; /* 保留下圆角 */
  border-bottom-right-radius: var(--card-radius) !important; /* 保留下圆角 */
  border-radius: 0 0 var(--card-radius) var(--card-radius) !important; /* 上直角，下圆角 */
}
.function-params {
  border-top-left-radius: var(--card-radius); /* 下卡片上圆角需要保留 */
  border-top-right-radius: var(--card-radius); /* 下卡片上圆角需要保留 */
  /* 保留底部边框，由遮罩伪元素覆盖按钮下方的边界线 */
  box-shadow: 0px 10px 10px 5px rgba(228, 232, 234, 0.75);
  border-bottom-left-radius: var(--card-radius) !important; /* 保留下圆角 */
  border-bottom-right-radius: var(--card-radius) !important; /* 保留下圆角 */
  border-radius: var(--card-radius) !important; /* 下卡片四角圆角 */
}
/* 覆盖生成按钮正下方的卡片底边框线段（不影响两侧边界线显示） */
.function-params::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 140px; /* 覆盖区域略大于按钮宽度 */
  height: 6px;  /* 覆盖足够的线条厚度 */
  background: var(--left-card-bg);
  border-radius: 6px;
  z-index: 15;
}
/* Tabs 列表容器：绝对定位在卡片上沿之外 */
#function-tabs,
#car-function-tabs {
  position: absolute; /* 悬浮在卡片上沿之外 */
  top: calc(-1 * var(--tabs-offset-y)); /* 向上偏移到卡片外部 */
  left: -1px; /* 与卡片左边线对齐 */
  right: -1px; /* 与卡片右边线对齐 */
  height: var(--tabs-height); /* Tabs 高度 */
  display: flex; /* 横向排列两个标签 */
  gap: var(--tabs-gap); /* 两标签之间的间距 */
  z-index: 3; /* 置于卡片内容之上 */
}
.car-card #car-function-tabs { top: calc(-1 * var(--tabs-offset-y) - 14px) !important; }
.car-card #car-function-tabs { height: 45px !important; }
.function-tab {
  display: inline-flex; /* 按钮内文字水平垂直居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  flex: 1; /* 两个标签等分宽度 */
  height: var(--tabs-height); /* 与容器高度一致 */
  border-radius: var(--tabs-radius); /* 圆角外观 */
  font-size: var(--tabs-font-size); /* 标签字体大小 */
  font-weight: var(--group-title-font-weight); /* 标签字重 */
  opacity: 0; /* 初始透明，后续由 JS 控制显隐 */
  background: transparent !important; /* 初始透明背景 */
  border: none !important; /* 去除默认边框 */
  cursor: pointer; /* 鼠标显示为可点击 */
}
.car-card .function-tab { height: 45px !important; }
/* 移除视频标签底部圆角（避免出现额外圆弧叠影） */
#tab-video,
#tab-video.tab-active,
#tab-video.tab-inactive { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.function-selection::before,
.function-selection::after {
  content: ''; /* 生成伪元素内容（为空） */
  position: absolute; /* 绝对定位到卡片上沿 */
  top: calc(-1 * var(--tabs-offset-y)); /* 向上偏移到卡片外部 */
  height: var(--tabs-height); /* 标签高度 */
  width: calc(50% - 4px); /* 宽度为半卡片减去间距 */
  border-radius: var(--tabs-radius); /* 标签圆角 */
  display: inline-flex; /* 使文字可居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  font-size: var(--tabs-font-size); /* 标签字号 */
  color: var(--tabs-text-color); /* 标签文字颜色 */
  border: var(--card-border) solid var(--left-card-border); /* 标签边框 */
  background: var(--tab-inactive-bg); /* 未激活背景 */
  z-index: 2; /* 高于卡片内容 */
}
.car-card.function-selection::before,
.car-card.function-selection::after { top: calc(-1 * var(--tabs-offset-y) - 14px) !important; }
.car-card.function-selection::before,
.car-card.function-selection::after { height: 45px !important; }
.function-selection::before {
  left: -1px; /* 与卡片左边线对齐 */
  content: '图片编辑'; /* 左侧标签文案 */
  border-bottom-left-radius: 0; /* 下沿左角直角，与卡片衔接 */
  border-bottom-right-radius: 0; /* 下沿右角直角，与卡片衔接 */
}
.function-selection::after  {
  right: -1px; /* 与卡片右边线对齐 */
  content: '视频编辑'; /* 右侧标签文案 */
  border-bottom-right-radius: 0; /* 下沿右角直角，与卡片衔接 */
  border-bottom-left-radius: 0; /* 下沿左角直角，与卡片衔接 */
}
.function-selection.tabs-image::before {
  background: #ffffff; /* 激活背景白 */
  border-color: var(--left-card-border); /* 外边框颜色 */
  border-bottom-color: #ffffff; /* 下沿与卡片无缝 */
  border-left-color: var(--left-card-border); /* 左边框颜色 */
}
.function-selection.tabs-video::after {
  background: #ffffff; /* 激活背景白 */
  border-color: var(--left-card-border); /* 外边框颜色 */
  border-bottom-color: #ffffff; /* 下沿与卡片无缝 */
  border-right-color: var(--left-card-border); /* 右边框颜色 */
}
.function-tab.tab-active {
  background: transparent !important;
  border: none !important;
}

/* 弹窗左侧汽车卡片：使用真实按钮作为标签，需覆盖透明样式 */
.car-card .function-tab.tab-active {
  background: transparent !important;
  border: none !important;
  color: var(--tabs-text-color) !important;
  opacity: 0 !important;
}

/* 汽车融合卡片专用样式覆盖 */
.car-card.function-selection {
  width: 500px !important;
  min-width: 500px !important;
  max-width: 500px !important;
  margin-top: calc(var(--tabs-offset-y) + 14px) !important;
  height: calc(100% - 84px - var(--tabs-offset-y) - 14px + 10px) !important;
}
/* 隐藏滚动条但保留滚动能力（容器需开启 overflow） */
.hide-scrollbar {
  -ms-overflow-style: none; /* IE/Edge */
  scrollbar-width: none;    /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* 汽车内建图库两列布局：精确像素与边距 */
.car-built-grid {
  display: grid;
  grid-template-columns: 220px 220px;
  column-gap: 20px;
  row-gap: 20px;
}
.car-dd-col {
  width: 220px;
  display: flex;
  align-items: center;
}
.car-grid-item {
  width: 220px;
  height: 124px; /* 220 * 9 / 16 */
}
/* 强制覆盖图片高度 */
.car-grid-item img,
.ai-slot img {
  height: 100% !important;
}
.ai-slot.h-\[165px\],
.ai-slot.h-\[165px\] img {
  height: 165px !important;
}
.ai-slot.h-\[124px\],
.ai-slot.h-\[124px\] img {
  height: 124px !important;
}
/* 强制增加权重，确保伪元素文案生效 */
div.car-card.function-selection::before {
  content: '内建车型图库' !important;
}
div.car-card.function-selection::after {
  content: 'AI生成车型' !important;
}
/* 确保真实按钮完全不可见但可点击 */
.car-card .function-tab {
  opacity: 0 !important;
  z-index: 10 !important;
  background: transparent !important;
}
.function-tab.tab-inactive {
  background: transparent !important;
  border: none !important;
}
/* 汽车下拉框专用类：确保未展开时字体为 13px */
/* 同时作用于原始 select（以此计算尺寸）和自定义 toggle（实际显示） */
.car-select,
.car-select .cs-toggle {
  font-size: 13px !important;
  line-height: 20px !important;
}
/* 修正自定义下拉的高度与内边距 */
.car-select,
.car-select .cs-toggle {
  height: 32px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.car-select .cs-toggle {
  background-color: transparent !important;
}
/* 强制覆盖自定义下拉的暗色背景（如果有） */
.car-select + .custom-select .cs-toggle {
    background-color: transparent !important;
}

/* 分组容器与分隔线 */
#function-selection-body {
  width: var(--selection-body-width) !important; /* 主体宽度与按钮一致 */
  margin-left: auto; /* 居中：左侧自动外边距 */
  margin-right: auto; /* 居中：右侧自动外边距 */
}
.function-divider {
  width: var(--function-divider-width); /* 分隔线宽度 */
  height: var(--function-divider-height); /* 分隔线高度 */
  background: var(--left-card-border); /* 颜色与卡片边框一致 */
  margin: var(--function-divider-margin-y) auto; /* 上下间距，水平居中 */
}
#function-tabs + #function-selection-body h3 {
  line-height: 1 !important; /* 紧凑行高 */
  color: var(--function-group-title-color) !important; /* 标题颜色 */
  font-weight: var(--group-title-font-weight) !important; /* 标题字重 */
}

/* 功能按钮 */
#function-tabs + #function-selection-body .function-btn,
.function-btn {
  background: var(--function-btn-bg); /* 按钮背景（白/渐变） */
  color: var(--function-btn-text); /* 按钮文字颜色 */
  border: var(--card-border) solid var(--function-btn-border); /* 外边框 */
  width: var(--function-btn-width); /* 固定宽度 */
  height: var(--function-btn-height); /* 固定高度 */
  border-radius: var(--function-btn-radius); /* 圆角 */
  display: flex; /* 弹性容器 */
  align-items: center; /* 内部垂直居中 */
  font-size: var(--function-btn-font-size) !important; /* 字号（覆盖 Tailwind） */
  font-weight: var(--function-btn-font-weight); /* 字重（覆盖 Tailwind） */
  position: relative; /* 供右侧徽标绝对定位使用 */
  padding-left: var(--function-btn-pad-x); /* 左侧内边距 */
  padding-right: var(--function-btn-pad-x); /* 右侧内边距 */
  margin-left: auto; /* 居中：左外边距自动 */
  margin-right: auto; /* 居中：右外边距自动 */
  box-sizing: border-box; /* 盒模型包含边框与内边距 */
}
.function-btn.active {
  background: linear-gradient(to bottom, var(--function-btn-active-top), var(--function-btn-active-bottom)) !important; /* 激活背景渐变 */
  color: var(--function-btn-active-border) !important; /* 激活文字颜色 */
  border: var(--card-border) solid var(--function-btn-active-border) !important; /* 激活边框颜色 */
}
.function-btn .func-text { line-height: 1 !important; /* 文本行高紧凑 */ }
.function-btn .func-icon {
  width: var(--function-icon-size); /* 左侧图标宽度 */
  height: var(--function-icon-size); /* 左侧图标高度 */
  margin-right: var(--function-icon-gap); /* 图标与文字间距 */
  background-repeat: no-repeat; /* 背景不平铺 */
  background-position: center; /* 居中显示图标 */
  background-size: contain; /* 保持比例包含 */
}

/* 新功能徽标: 使用 span 和 background-image 实现 */
.function-btn-wrapper {
  position: relative;
}

.new-badge {
  position: absolute;
  right: var(--new-badge-right);
  top: 50%;
  transform: translateY(-50%);
  background-color: #f2330b;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  line-height: 1;
  white-space: nowrap;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.15); */
}


/* Prompt 与尺寸/比例 */
#size-block .size-input { padding-right: var(--size-input-pad-right-sm); /* 自定义模式右侧留白 */ }
#size-block .input-tag { /* 尺寸模块内的左侧标签（收窄版） */
  position: absolute; /* 绝对定位 */
  left: var(--size-block-label-left); /* 左偏移（收窄） */
  top: 50%; /* 垂直居中基线 */
  transform: translateY(-50%); /* 修正垂直居中 */
  color: var(--size-block-input-tag-color); /* 标签颜色 */
  font-size: var(--label-font-size); /* 字号 */
}
#ratio-group .ratio-btn.ui-chip {
  display: inline-flex; /* 文本居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  gap: 0; /* 去掉默认内部间距 */
}
/* 胶囊标签（Chip）：用于展示比例/状态等的小型标签组件 */
/* 通用 Chip 外观：圆角、边框与内部阴影 */
.ui-chip { /* 胶囊标签样式 */
  display: inline-flex; /* 行内弹性容器 */
  align-items: center; /* 垂直居中 */
  gap: var(--chip-gap); /* 内部元素间距 */
  padding: var(--chip-pad-y) var(--chip-pad-x); /* 上下/左右内边距 */
  border-radius: var(--chip-radius); /* 圆角 */
  background: var(--chip-bg); /* 背景色 */
  color: var(--chip-text-color); /* 文本颜色 */
  font-size: var(--chip-font-size); /* 字号 */
  font-weight: var(--font-weight-semibold); /* 字重（半粗） */
  border: var(--chip-border) solid var(--chip-border-color); /* 外边框 */
  box-shadow: inset 0 0 0 var(--chip-border) var(--chip-inner-shadow-color); /* 内部阴影 */
}
/* 比例图标（小方块）：外层圆角与背景 */
.ratio-icon { /* 比例图标容器 */
  width: var(--ratio-icon-width); /* 宽度 */
  height: var(--ratio-icon-height); /* 高度 */
  border-radius: var(--ratio-icon-radius); /* 外部圆角 */
  background: var(--ratio-icon-bg); /* 背景色 */
  position: relative; /* 相对定位（供内框绝对定位） */
}
/* 比例图标内框：等距内缩的细边框（作为视觉参考） */
.ratio-icon::after { /* 内框伪元素 */
  content: ""; /* 空内容 */
  position: absolute; /* 绝对定位 */
  inset: var(--ratio-icon-inset); /* 四边内缩距离 */
  border: var(--ratio-icon-inner-border-width) solid var(--ratio-icon-inner-border); /* 内框边线 */
  border-radius: var(--ratio-icon-inner-radius); /* 内框圆角 */
}
/* 尺寸输入框：左右留白与右对齐数值 */
.size-input { /* 尺寸输入框 */
  padding-left: var(--size-input-pad-left); /* 左侧标签预留空间 */
  padding-right: var(--size-input-pad-right-lg); /* 右侧单位预留空间（宽版） */
  text-align: right; /* 数值右对齐 */
}
/* 尺寸输入左侧标签：位置与字号 */
.input-tag { /* 左侧标签（W/H） */
  position: absolute; /* 绝对定位 */
  left: var(--label-left); /* 左偏移 */
  top: 50%; /* 垂直居中基线 */
  transform: translateY(-50%); /* 修正垂直居中 */
  color: var(--size-input-tag-color); /* 标签颜色 */
  font-weight: var(--font-weight-bold); /* 字重 */
  font-size: var(--label-font-size); /* 字号 */
  letter-spacing: var(--label-letter-spacing); /* 字距 */
}
/* 尺寸输入右侧单位：位置与字号 */
.unit-tag { /* 右侧单位（px）标签 */
  position: absolute; /* 绝对定位 */
  right: var(--unit-right); /* 右偏移 */
  top: 50%; /* 垂直居中基线 */
  transform: translateY(-50%); /* 修正垂直居中 */
  color: var(--size-input-unit-color); /* 标签颜色 */
  font-weight: var(--font-weight-bold); /* 字重 */
  font-size: var(--label-font-size); /* 字号 */
  letter-spacing: var(--label-letter-spacing); /* 字距 */
  pointer-events: none; /* 禁止交互 */
}

/* 卡片内部滚动容器 */
/* 卡片参数容器：纵向布局，内容可收缩 */
.function-params { /* 卡片参数容器 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 纵向排列 */
  position: relative; /* 作为绝对定位子元素参照 */
  min-height: 0; /* 允许子项按需撑开高度 */
  padding-bottom: 27px; /* 预留生成按钮上缘与内容之间18px：25（按钮内侵）+18 -16=27 */
}
/* 参数滚动区：隐藏滚动条，撑满剩余空间 */
.function-params .params-scroll { /* 参数滚动区 */
  flex: 1 1 auto; /* 撑满剩余空间 */
  min-height: 0; /* 允许滚动区在容器内自适应 */
  overflow-y: auto; /* 仅允许纵向滚动 */
  overflow-x: hidden; /* 禁止横向滚动 */
  -ms-overflow-style: none; /* IE/旧 Edge 隐藏滚动条 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  padding-bottom: 0; /* 去掉底部额外留白 */
}
/* WebKit 隐藏滚动条 */
.function-params .params-scroll::-webkit-scrollbar { /* WebKit 隐藏滚动条 */
  display: none; /* 隐藏滚动条 */
}
/* 吸底按钮预留：为底部按钮留出滚动内边距 */
.function-params .params-scroll.has-sticky-btn { /* 吸底按钮预留空间 */
  padding-bottom: var(--params-scroll-sticky-padding-bottom); /* 底部额外留白 */
}
/* 卡片滚动容器：车融合提示打开时允许溢出可见 */
.function-params .params-scroll.car-blend-tip-open { /* 车融合提示打开时允许溢出 */
  overflow: visible; /* 允许溢出可见 */
}
/* 吸底创作按钮与滚动区预留 */
/* 创作按钮：粘底定位 */
#create-btn.sticky-btn { /* 创作按钮（粘底） */
  position: absolute; /* 绝对定位吸底 */
  bottom: 0; /* 紧贴容器底部 */
  z-index: 10; /* 提升层级避免被内容遮挡 */
}
/* 吸底按钮占位类：滚动区底部 padding 由 JS 动态设置 */
/* 自由编辑预览格子保持 1:1 正方形 */
/* 自由编辑缩略预览：保持 1:1 格子 */
#free-edit-previews .relative { /* 自由编辑预览格子 */
  aspect-ratio: 1 / 1; /* 保持正方形 */
}

/* 模型选择与布局细节 */
/* 模型区栅格：窄屏自动换行 */
#model-block > .flex { /* 模型区栅格容器 */
  flex-wrap: wrap; /* 窄屏自动换行 */
}
#model-block > .flex > .flex-1 { /* 模型区主列 */
  min-width: 0; /* 允许内容收缩以避免溢出 */
}
@media (max-width: 380px) { /* 380px 以下窄屏适配 */
  #model-block > .flex > .flex-1 { width: 100%; } /* 窄屏下主列占满一行 */
}

/* 模型块顶部间距统一为16px，覆盖初始 mt-3 */
#model-block { margin-top: 16px !important; }

/* 比例按钮：文本不换行与紧凑间距（避免布局抖动） */
#ratio-group .ratio-btn { /* 比例按钮辅助样式 */
  white-space: nowrap; /* 文本不换行 */
  font-size: var(--ratio-btn-font-size); /* 紧凑字号 */
  padding: var(--ratio-btn-pad-y) var(--ratio-btn-pad-x); /* 内边距 */
}

/* 轻量“编辑背景”按钮 */
/* 轻量“编辑背景”按钮：紧凑字号并避免换行 */
#edit-bg-btn { /* 轻量“编辑背景”按钮 */
  font-size: 11px; /* 紧凑字号 */
  white-space: nowrap; /* 文本不换行 */
}