/* ---------- 文件 ---------- */

/*
   .atlas-form-error 的成功对应物，刻意更低调：错误必须被读，确认只需被注意到。
*/
.atlas-form-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--dxds-color-border-success-default-rest);
  color: var(--dxds-color-content-success-default-rest);
  font-size: 0.875rem;
}

.atlas-settings-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* 侧边栏加网格。侧边栏保持宽度，网格占用其余部分；网格端的 min-width: 0
   是阻止宽行将侧边栏推出屏幕而不是在其自己的窗格内滚动的原因。 */
.atlas-file-library {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1rem;
  min-height: 0;
}

.atlas-file-categories {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0.5rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: 4px;
  /* 白色表面，不是低调的灰色：面板通过其边框与页面区分，不是灰色填充——
     参见 no-grey-panels 规则。 */
  background-color: var(--dxds-color-surface-neutral-default-rest);
}

.atlas-file-categories-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.25rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

.atlas-file-category-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.atlas-file-category {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.atlas-file-category .atlas-icon {
  flex: 0 0 auto;
}

.atlas-file-category:hover {
  background-color: var(--dxds-color-surface-neutral-default-hovered);
}

/* 选择由填充和字重表示——没有手动设置的颜色。 */
.atlas-file-category--active {
  background-color: var(--dxds-color-surface-neutral-default-hovered);
  font-weight: 600;
}

.atlas-file-category-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 细边框药丸而不是裸数字，无灰色填充（参见 no-grey-panels 规则）。
   静音文本是继承的次要 token，不是选择的颜色。 */
.atlas-file-category-count {
  flex: 0 0 auto;
  min-width: 1.4rem;
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: 999px;
  font-size: 0.6875rem;
  line-height: 1.2;
  text-align: center;
  color: var(--dxds-color-content-neutral-subdued-rest);
  font-variant-numeric: tabular-nums;
}

/* 行工具仅在悬停时出现：四行每行显示两个按钮是噪音，计数是值得在静止时读取的。 */
.atlas-file-category-tools {
  display: none;
  align-items: center;
}

.atlas-file-category:hover .atlas-file-category-tools {
}

.atlas-file-category:hover .atlas-file-category-count {
}

/*
   必须是 flex 列，不能是默认的 block。

   高度链（见 04-navigation.css 的"标签条是高度链中丢失的链接"）要求从
   .atlas-workspace 到网格的每一层都传递有界高度；display: block 的中间层
   不约束子元素高度，.atlas-grid 的 flex: 1 1 auto / min-height: 0 对着
   block 父级完全失效——网格按内容撑高溢出视口，症状是"无法滚动的页"，
   任何一层都不出滚动条。min-height: 0 单独存在时是死字段：flex 收缩许可
   只在 flex 容器里有意义。
*/
.atlas-file-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* 缩略图单元。固定框，所以行保持一个高度，无论图像是什么。 */
.atlas-file-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: 4px;
  background-color: var(--dxds-color-surface-neutral-subdued-rest);
  cursor: pointer;
  overflow: hidden;
}

.atlas-file-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.atlas-file-preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.atlas-file-preview img,
.atlas-file-preview video {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  border-radius: 4px;
  background-color: var(--dxds-color-surface-neutral-subdued-rest);
}

.atlas-file-preview audio {
  width: 100%;
}

.atlas-file-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  border-radius: 4px;
  background-color: var(--dxds-color-surface-neutral-subdued-rest);
  color: var(--dxds-color-content-neutral-subdued-rest);
}

/* 两列中的标签/值对，所以元数据读起来像一个表格但不是。 */
.atlas-file-preview-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
  font-size: 0.875rem;
}

.atlas-file-preview-meta dt {
  color: var(--dxds-color-content-neutral-subdued-rest);
}

.atlas-file-preview-meta dd {
  margin: 0;
}

/* 链接行：长 URL 截断省略，复制按钮贴在右侧；按钮是裸图标，悬停给浅中性反馈。 */
.atlas-file-preview-url {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.atlas-file-preview-url a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-file-preview-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.75;
}

.atlas-file-preview-copy:hover {
  opacity: 1;
  background-color: var(--dxds-color-surface-neutral-default-hovered);
}

/* ---------- 对话框 ---------- */

/*
   每个 DxPopup 的正文。它位于模态框的内容列内，所以它占用自由空间（flex）
   并允许缩小（min-height: 0），以便可滚动的子元素——文件选择器的网格、
   图标浏览器的网格——在卡片内滚动而不是增长。内边距将内容与头部和页脚对齐，
   DxPopup 都不为你填充。

   曾是 atlas-file-dialog-body，当文件选择器是唯一有包装器的对话框时。
   从重置密码提示到文件预览的所有内容现在都共享它，曾经陪伴它的特定文件规则
   现在存在于自己的部分中。
*/
.atlas-dialog-body {
  min-height: 0;
  flex: 1 1 auto;
  padding: 0 1.5rem 1rem;
}

/* ---------- 文件选择器 ---------- */

.atlas-file-dialog-tabs {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.atlas-file-dialog-tabs .dxbl-tabs-content-panel {
  min-height: 0;
  flex: 1 1 auto;
  padding-top: 1rem;
}

.atlas-file-dialog-tabs .dxbl-tabs-content.dxbl-active {
  display: flex;
  width: 100%;
  min-height: 0;
  flex-direction: column;
}

.atlas-file-picker-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.atlas-file-picker-item,
.atlas-file-picker-add {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 6.5rem;
  height: 6.5rem;
  padding: 0.35rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: 4px;
  background-color: var(--dxds-color-surface-neutral-subdued-rest);
  overflow: hidden;
}

.atlas-file-picker-add {
  border-style: dashed;
  color: var(--dxds-color-content-neutral-subdued-rest);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.atlas-file-picker-add:hover {
  border-color: var(--dxds-color-border-primary-compound-rest);
  color: var(--dxds-color-content-primary-default-rest);
}

.atlas-file-picker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.atlas-file-picker-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.atlas-file-picker-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}

/* 位于缩略图上方而不是旁边：瓷砖是控件，自己一行的删除按钮会使每行的高度翻倍。 */
.atlas-file-picker-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgb(0 0 0 / 55%);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
}

.atlas-file-picker-filters {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.atlas-file-picker-category {
  width: 13rem;
  flex: 0 0 13rem;
}

.atlas-file-picker-search {
  min-width: 12rem;
  flex: 1 1 auto;
}

.atlas-file-picker-result-count {
  flex: 0 0 auto;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background-color: var(--dxds-color-surface-neutral-subdued-rest);
  color: var(--dxds-color-content-neutral-subdued-rest);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* auto-fill，不是 auto-fit：有一个结果时 auto-fit 会将其拉伸到整个对话框。 */
.atlas-file-picker-browse {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  grid-auto-rows: 8.5rem;
  gap: 0.625rem;
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: var(--dxds-border-radius-80, 8px);
  background-color: var(--dxds-color-surface-neutral-subdued-rest);
}

.atlas-file-picker-browse-item {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: 4px;
  background-color: var(--dxds-color-surface-neutral-default-rest);
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
}

.atlas-file-picker-browse-item img {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
}

.atlas-file-picker-browse-item:hover {
  border-color: var(--dxds-color-border-primary-compound-rest);
  background-color: var(--dxds-color-surface-neutral-default-hovered);
}

.atlas-file-picker-browse-item--selected {
  border-color: var(--dxds-color-border-primary-compound-rest);
  background-color: var(--dxds-color-surface-primary-subdued-rest);
  box-shadow: inset 0 0 0 1px var(--dxds-color-border-primary-compound-rest);
}

.atlas-file-picker-selected-mark {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  place-items: center;
  border-radius: 50%;
  background-color: var(--dxds-color-surface-primary-default-rest);
  color: var(--dxds-color-content-neutral-compound-on-surface-rest);
  box-shadow: var(--dxds-shadow-level-1, 0 1px 2px rgba(0, 0, 0, 0.2));
}

.atlas-file-picker-empty {
  display: flex;
  min-height: 12rem;
  grid-column: 1 / -1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--dxds-color-content-neutral-subdued-rest);
  text-align: center;
}

.atlas-file-picker-empty strong {
  color: var(--dxds-color-content-neutral-default-rest);
  font-size: 0.9375rem;
}

.atlas-file-picker-empty span {
  font-size: 0.8125rem;
}

.atlas-file-picker-upload-pane {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: var(--dxds-border-radius-80, 8px);
  background-color: var(--dxds-color-surface-neutral-subdued-rest);
}

.atlas-file-picker-upload-copy {
  display: flex;
  max-width: 28rem;
  align-items: center;
  gap: 1rem;
}

.atlas-file-picker-upload-mark {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  flex: 0 0 3.5rem;
  place-items: center;
  border-radius: var(--dxds-border-radius-80, 8px);
  background-color: var(--dxds-color-surface-primary-subdued-rest);
  color: var(--dxds-color-content-primary-default-rest);
}

.atlas-file-picker-upload-copy strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 1rem;
}

.atlas-file-picker-upload-copy p {
  margin: 0;
  color: var(--dxds-color-content-neutral-subdued-rest);
  font-size: 0.8125rem;
}

.atlas-file-picker-upload-pane .atlas-uploader {
  width: min(28rem, 100%);
}

@media (max-width: 40rem) {
  .atlas-dialog-body {
    padding-inline: 1rem;
  }

  .atlas-file-picker-filters {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .atlas-file-picker-category,
  .atlas-file-picker-search {
    width: 100%;
    flex: 1 1 100%;
  }

  .atlas-file-picker-browse {
    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  }
}

.atlas-uploader {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}


/* ---------- 文件库 ---------- */

/* 文件网格的平铺替代方案。白色卡片由其边框定界（无灰色填充——参见 no-grey-panels 规则），
   重音在悬停时出现，就像图标浏览器的瓷砖一样。 */
.atlas-file-gallery-bar {
  margin-bottom: 0.5rem;
}

.atlas-file-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.75rem;
  overflow-y: auto;
  min-height: 0;
  padding: 0.25rem;
}

.atlas-file-gallery-item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.6rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: var(--dxds-border-radius-60, 6px);
  background-color: var(--dxds-color-surface-neutral-default-rest);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.atlas-file-gallery-item:hover {
  border-color: var(--dxds-color-border-primary-compound-rest);
  background-color: var(--dxds-color-surface-neutral-default-hovered);
}

/* 美术作品的固定舞台，所以行对齐，无论文件是什么：图像覆盖它，其他种类居中其类型字形。 */
.atlas-file-gallery-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6.5rem;
  overflow: hidden;
  border-radius: var(--dxds-border-radius-40, 4px);
}

.atlas-file-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.atlas-file-gallery-thumb .atlas-icon {
  color: var(--dxds-color-content-neutral-subdued-rest);
}

.atlas-file-gallery-name {
  overflow: hidden;
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.atlas-file-gallery-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

.atlas-file-gallery-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

/* 瓷砖上的选择。复选框位于美术作品的角落上的小表面芯片上，所以它读起来在任何图像上方；
   它在悬停和焦点时出现，并在选择活动时留在每个瓷砖上——勾选第二个文件不应该是悬停搜索。 */
.atlas-file-gallery-item {
  position: relative;
}

.atlas-file-gallery-check {
  position: absolute;
  z-index: 1;
  inset-block-start: 0.45rem;
  inset-inline-start: 0.45rem;
  display: grid;
  place-items: center;
  padding: 0.15rem;
  border: 1px solid var(--dxds-color-border-neutral-default-rest);
  border-radius: var(--dxds-border-radius-40, 4px);
  background-color: var(--dxds-color-surface-neutral-default-rest);
  cursor: pointer;
  opacity: 0;
}

.atlas-file-gallery-check input {
  display: block;
  margin: 0;
  cursor: pointer;
  accent-color: var(--dxds-color-border-primary-compound-rest);
}

.atlas-file-gallery-item:hover .atlas-file-gallery-check,
.atlas-file-gallery-item:focus-visible .atlas-file-gallery-check,
.atlas-file-gallery-item--selecting .atlas-file-gallery-check,
.atlas-file-gallery-item--selected .atlas-file-gallery-check {
  opacity: 1;
}

.atlas-file-gallery-item--selected {
  border-color: var(--dxds-color-border-primary-compound-rest);
  box-shadow: inset 0 0 0 1px var(--dxds-color-border-primary-compound-rest);
}

/* 可以重新打开对话框的选定芯片读起来是可点击的。 */
.atlas-file-picker-item--clickable {
  cursor: pointer;
}

/* 预览眼睛位于右上方；删除按钮向左移动一个插槽，所以两者在 64px 芯片上都可以到达。 */
.atlas-file-picker-eye {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgb(0 0 0 / 55%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.atlas-file-picker-item .atlas-file-picker-eye + .atlas-file-picker-remove {
  right: calc(2px + 1.25rem + 4px);
}

/* 眼睛弹出框内的全尺寸预览。 */
.atlas-url-preview {
  display: flex;
  justify-content: center;
  padding: 8px;
}

.atlas-url-preview img,
.atlas-url-preview video {
  max-width: 100%;
  max-height: 70vh;
}

/* URL 选择器的"粘贴链接"按钮与内联输入行——库外文件（旧 OSS 直链）的手输通道。 */
.atlas-file-picker-linkbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--dxds-color-border-neutral-subdued-rest);
  border-radius: 4px;
  background: transparent;
  color: var(--dxds-color-content-neutral-subdued-rest);
  cursor: pointer;
  align-self: center;
}

.atlas-file-picker-linkbtn:hover {
  background-color: var(--dxds-color-surface-neutral-default-hovered);
  color: var(--dxds-color-content-neutral-default-rest);
}

.atlas-file-picker-urlrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.atlas-file-picker-urlrow .dxbl-text-edit {
  flex: 1 1 auto;
  min-width: 16rem;
}