minecodex 2.0.54 → 2.1.1

package/features/images/web/styles.css

@@ -1,1114 +0,0 @@
-:root {
-  color-scheme: light;
-  --mcx-codex-base-accent: #339cff;
-  --mcx-color-token-main-surface-primary: #fff;
-  --mcx-color-token-bg-primary: #f9f9f9;
-  --mcx-color-token-bg-secondary: color-mix(in srgb, #f9f9f9 92%, transparent);
-  --mcx-color-surface-tertiary: #f0f0f0;
-  --mcx-color-surface-elevated-secondary: #fff;
-  --mcx-color-border-subtle: color-mix(in oklab, #1a1c1f 4%, transparent);
-  --mcx-color-background-primary-ghost-hover: color-mix(in oklab, #1a1c1f 5%, transparent);
-  --mcx-color-chart-blue: #339cff;
-  --mcx-color-text-inverse: #fff;
-  --mcx-color-background-elevated-primary-opaque: #fff;
-  --mcx-color-background-panel: #f5f5f5;
-  --mcx-color-background-primary-solid: #1a1c1f;
-  --mcx-color-text-primary-solid: #fff;
-  --mcx-color-background-button-secondary: color-mix(in oklab, #1a1c1f 5%, transparent);
-  --mcx-color-background-button-secondary-hover: color-mix(in oklab, #1a1c1f 8%, transparent);
-  --mcx-color-background-button-tertiary-hover: color-mix(in oklab, #1a1c1f 7%, transparent);
-  --mcx-color-text-foreground: #1a1c1f;
-  --mcx-color-text-foreground-secondary: color-mix(in oklab, #1a1c1f 70%, transparent);
-  --mcx-color-text-foreground-tertiary: color-mix(in oklab, #1a1c1f 50%, transparent);
-  --mcx-color-icon-tertiary: rgb(13 13 13 / 48.4%);
-  --mcx-color-text-accent: #087ccf;
-  --mcx-color-border: color-mix(in oklab, #1a1c1f 8%, transparent);
-  --mcx-color-border-heavy: color-mix(in oklab, #1a1c1f 14%, transparent);
-  --mcx-color-border-focus: #339cff;
-  --mcx-color-token-scrollbar-slider-background: var(--mcx-color-border);
-  --mcx-color-token-scrollbar-slider-hover-background: var(--mcx-color-border-heavy);
-  --mcx-color-token-scrollbar-slider-active-background: var(--mcx-color-border-heavy);
-  --mcx-color-token-list-hover-background: color-mix(in oklab, #1a1c1f 5%, transparent);
-  --mcx-color-token-input-background: #f3f3f3;
-  --mcx-color-token-input-border: color-mix(in oklab, #1a1c1f 14%, transparent);
-  --mcx-color-token-input-foreground: #1a1c1f;
-  --mcx-color-token-input-placeholder-foreground: color-mix(in oklab, #1a1c1f 50%, transparent);
-  --mcx-font-sans-default: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-  --mcx-default-mono-font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
-  --mcx-text-heading-md: 20px;
-  --text-heading-sm: 18px;
-  --mcx-text-base: 14px;
-  --mcx-text-sm: 13px;
-  --mcx-text-xs: 12px;
-  --mcx-radius-md: 10px;
-  --mcx-radius-lg: 12.5px;
-  --mcx-radius-xl: 15px;
-  --mcx-shadow-xl: 0 8px 30px rgb(0 0 0 / 14%);
-  --library-gutter: clamp(20px, 4vw, 56px);
-  --library-card-radius: 16px;
-  --library-canvas: color-mix(in srgb, var(--mcx-color-token-main-surface-primary) 98.8%, var(--mcx-color-text-foreground));
-  --library-card-border: light-dark(rgb(0 0 0 / 5%), var(--mcx-color-border-subtle));
-  --library-card-shadow: 0 4px 16px 0 light-dark(rgb(0 0 0 / 5%), rgb(0 0 0 / 16%));
-  --library-detail-gutter: clamp(20px, 3vw, 40px);
-  font-family: var(--mcx-font-sans-default);
-  background: var(--mcx-color-token-main-surface-primary);
-  color: var(--mcx-color-text-foreground);
-}
-
-:root[data-theme="dark"] {
-  color-scheme: dark;
-  --mcx-color-token-main-surface-primary: #181818;
-  --mcx-color-token-bg-primary: #141414;
-  --mcx-color-token-bg-secondary: color-mix(in srgb, #141414 92%, transparent);
-  --mcx-color-surface-tertiary: rgb(40 40 40);
-  --mcx-color-surface-elevated-secondary: rgb(45 45 45);
-  --mcx-color-border-subtle: rgb(255 255 255 / 4.2%);
-  --mcx-color-background-primary-ghost-hover: rgb(255 255 255 / 7.8%);
-  --mcx-color-chart-blue: #339cff;
-  --mcx-color-text-inverse: rgb(13 13 13);
-  --mcx-color-background-elevated-primary-opaque: #363636;
-  --mcx-color-background-panel: #232323;
-  --mcx-color-background-primary-solid: #fff;
-  --mcx-color-text-primary-solid: #2d2d2d;
-  --mcx-color-background-button-secondary: rgb(255 255 255 / 5.2%);
-  --mcx-color-background-button-secondary-hover: rgb(255 255 255 / 7.8%);
-  --mcx-color-background-button-tertiary-hover: rgb(255 255 255 / 6.8%);
-  --mcx-color-text-foreground: #fff;
-  --mcx-color-text-foreground-secondary: rgb(255 255 255 / 71%);
-  --mcx-color-text-foreground-tertiary: rgb(255 255 255 / 49.8%);
-  --mcx-color-icon-tertiary: color-mix(in oklab, #fff 50%, transparent);
-  --mcx-color-text-accent: #83c3ff;
-  --mcx-color-border: rgb(255 255 255 / 8.4%);
-  --mcx-color-border-heavy: rgb(255 255 255 / 15.6%);
-  --mcx-color-border-focus: rgb(131 195 255 / 76%);
-  --mcx-color-token-list-hover-background: rgb(255 255 255 / 7.8%);
-  --mcx-color-token-input-background: rgb(45 45 45 / 96%);
-  --mcx-color-token-input-border: rgb(255 255 255 / 15.6%);
-  --mcx-color-token-input-foreground: #fff;
-  --mcx-color-token-input-placeholder-foreground: rgb(255 255 255 / 49.8%);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    color-scheme: dark;
-    --mcx-color-token-main-surface-primary: #181818;
-    --mcx-color-token-bg-primary: #141414;
-    --mcx-color-token-bg-secondary: color-mix(in srgb, #141414 92%, transparent);
-    --mcx-color-surface-tertiary: rgb(40 40 40);
-    --mcx-color-surface-elevated-secondary: rgb(45 45 45);
-    --mcx-color-border-subtle: rgb(255 255 255 / 4.2%);
-    --mcx-color-background-primary-ghost-hover: rgb(255 255 255 / 7.8%);
-    --mcx-color-chart-blue: #339cff;
-    --mcx-color-text-inverse: rgb(13 13 13);
-    --mcx-color-background-elevated-primary-opaque: #363636;
-    --mcx-color-background-panel: #232323;
-    --mcx-color-background-primary-solid: #fff;
-    --mcx-color-text-primary-solid: #2d2d2d;
-    --mcx-color-background-button-secondary: rgb(255 255 255 / 5.2%);
-    --mcx-color-background-button-secondary-hover: rgb(255 255 255 / 7.8%);
-    --mcx-color-background-button-tertiary-hover: rgb(255 255 255 / 6.8%);
-    --mcx-color-text-foreground: #fff;
-    --mcx-color-text-foreground-secondary: rgb(255 255 255 / 71%);
-    --mcx-color-text-foreground-tertiary: rgb(255 255 255 / 49.8%);
-    --mcx-color-icon-tertiary: color-mix(in oklab, #fff 50%, transparent);
-    --mcx-color-text-accent: #83c3ff;
-    --mcx-color-border: rgb(255 255 255 / 8.4%);
-    --mcx-color-border-heavy: rgb(255 255 255 / 15.6%);
-    --mcx-color-border-focus: rgb(131 195 255 / 76%);
-    --mcx-color-token-list-hover-background: rgb(255 255 255 / 7.8%);
-    --mcx-color-token-input-background: rgb(45 45 45 / 96%);
-    --mcx-color-token-input-border: rgb(255 255 255 / 15.6%);
-    --mcx-color-token-input-foreground: #fff;
-    --mcx-color-token-input-placeholder-foreground: rgb(255 255 255 / 49.8%);
-  }
-}
-
-* { box-sizing: border-box; }
-
-html,
-body {
-  min-height: 100%;
-  margin: 0;
-  background: var(--mcx-color-token-main-surface-primary);
-}
-
-body {
-  min-width: 320px;
-  color: var(--mcx-color-text-foreground);
-  font: 400 var(--mcx-text-base)/1.5 var(--mcx-font-sans-default);
-  -webkit-font-smoothing: antialiased;
-}
-
-button,
-input { font: inherit; }
-
-button,
-a { -webkit-tap-highlight-color: transparent; }
-
-button { color: inherit; }
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.library-shell {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  overflow: hidden;
-  background: var(--mcx-color-token-main-surface-primary);
-}
-
-/* 侧栏分界不占用布局宽度。 */
-:root[data-sidebar-open="true"] .library-shell::before {
-  content: "";
-  position: absolute;
-  z-index: 12;
-  inset: 0 auto 0 0;
-  width: 1px;
-  background: var(--mcx-color-border);
-  pointer-events: none;
-}
-
-.library-header button,
-.library-header select,
-.source-menu { -webkit-app-region: no-drag; }
-
-.library-header .rescan-button {
-  margin-right: calc(var(--library-scrollbar-width, 0px) - 10px);
-}
-
-.library-pane {
-  width: 100%;
-  min-width: 0;
-  flex: 0 0 auto;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  container-type: inline-size;
-  background: var(--library-canvas);
-  transform: translateX(0);
-  transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-
-.library-scroll {
-  min-height: 0;
-  flex: 1 1 auto;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-gutter: stable;
-}
-
-.library-scroll,
-.drawer-scroll,
-.source-menu {
-  scrollbar-color: var(--mcx-color-token-scrollbar-slider-background) transparent;
-}
-
-.library-scroll::-webkit-scrollbar { width: 12px; }
-.library-scroll::-webkit-scrollbar-track { background: transparent; }
-
-.library-scroll::-webkit-scrollbar-thumb {
-  min-height: 48px;
-  border: 3px solid transparent;
-  border-radius: 999px;
-  background-clip: padding-box;
-}
-
-.library-scroll::-webkit-scrollbar-thumb,
-.drawer-scroll::-webkit-scrollbar-thumb,
-.source-menu::-webkit-scrollbar-thumb {
-  background-color: var(--mcx-color-token-scrollbar-slider-background);
-}
-
-.library-scroll::-webkit-scrollbar-thumb:hover,
-.drawer-scroll::-webkit-scrollbar-thumb:hover,
-.source-menu::-webkit-scrollbar-thumb:hover {
-  background-color: var(--mcx-color-token-scrollbar-slider-hover-background);
-}
-
-.library-scroll::-webkit-scrollbar-thumb:active,
-.drawer-scroll::-webkit-scrollbar-thumb:active,
-.source-menu::-webkit-scrollbar-thumb:active {
-  background-color: var(--mcx-color-token-scrollbar-slider-active-background);
-}
-
-.library-header,
-.drawer-header {
-  height: 72px;
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--mcx-color-border);
-  background: var(--mcx-color-token-main-surface-primary);
-}
-
-.library-header {
-  flex: 0 0 auto;
-  z-index: 4;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 0 var(--library-gutter);
-  border-bottom: 0;
-  background: var(--library-canvas);
-}
-
-.identity {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-}
-
-.sidebar-open-button { flex: 0 0 auto; }
-.sidebar-open-button[hidden] { display: none; }
-
-.sidebar-toggle-icon {
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
-}
-
-h1,
-h2,
-h3,
-p { margin: 0; }
-
-h1,
-.drawer-header h2 {
-  font-size: var(--mcx-text-base);
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.library-header h1 {
-  font-size: 26px;
-  font-weight: 600;
-  letter-spacing: -0.035em;
-}
-
-.library-toolbar {
-  min-width: 0;
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-  border: 0;
-  background: transparent;
-}
-
-.drawer-open .library-pane,
-.thread-context .library-pane {
-  width: 20%;
-  transform: translateX(0);
-  transition-duration: 200ms;
-}
-
-.drawer-open .library-toolbar,
-.thread-context .library-toolbar { display: none; }
-
-.source-filter,
-.density-control {
-  min-width: 0;
-  position: relative;
-}
-
-.toolbar-actions {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.toolbar-button {
-  height: 36px;
-  min-width: 0;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 14px;
-  color: var(--mcx-color-text-foreground-secondary);
-  background: transparent;
-  cursor: pointer;
-  font-size: var(--mcx-text-sm);
-  font-weight: 500;
-}
-
-.toolbar-button:hover,
-.toolbar-button[aria-expanded="true"] {
-  color: var(--mcx-color-text-foreground);
-  background: var(--mcx-color-background-button-tertiary-hover);
-}
-
-.source-filter-button {
-  width: auto;
-  max-width: 240px;
-}
-
-.filter-source-icon,
-.source-option-icon {
-  flex: 0 0 auto;
-  display: grid;
-  place-items: center;
-}
-
-.filter-source-icon .source-icon,
-.source-option-icon .source-icon {
-  width: 14px;
-  height: 14px;
-}
-
-.filter-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.filter-count,
-.source-option-count,
-.density-button-value {
-  color: var(--mcx-color-text-foreground-tertiary);
-  font-variant-numeric: tabular-nums;
-}
-
-.filter-count {
-  flex: 0 0 auto;
-  min-width: 0;
-  padding: 0;
-  background: transparent;
-  line-height: 1;
-  text-align: center;
-}
-
-.filter-chevron {
-  width: 13px;
-  height: 13px;
-  flex: 0 0 auto;
-  transition: transform 120ms ease;
-}
-
-.source-filter-button:hover,
-.source-filter-button[aria-expanded="true"] { background: var(--mcx-color-background-button-secondary-hover); }
-.source-filter-button[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }
-
-.source-menu {
-  position: absolute;
-  top: calc(100% + 6px);
-  z-index: 20;
-  border: 0;
-  border-radius: 16px;
-  background: var(--mcx-color-background-elevated-primary-opaque);
-  box-shadow: 0 8px 32px var(--mcx-color-border-heavy);
-}
-
-.source-menu[hidden] { display: none; }
-
-/* 透明边框保留固定底部留白，不随列表内容滚走。 */
-#source-menu {
-  border-bottom: 8px solid transparent;
-  padding-bottom: 0;
-}
-
-
-.source-menu {
-  left: 0;
-  width: min(260px, calc(100vw - 32px));
-  max-height: min(400px, calc(100vh - 96px));
-  padding: 6px;
-  overflow-y: auto;
-}
-
-.source-option {
-  width: 100%;
-  min-height: 36px;
-  border: 0;
-  border-radius: 10px;
-  display: grid;
-  grid-template-columns: 16px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 7px;
-  padding: 8px 10px;
-  color: var(--mcx-color-text-foreground-secondary);
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  font-size: var(--mcx-text-sm);
-}
-
-.source-option:hover,
-.source-option[aria-selected="true"] {
-  color: var(--mcx-color-text-foreground);
-  background: var(--mcx-color-token-list-hover-background);
-}
-
-.source-option-label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.source-option-count { padding-left: 8px; }
-
-.source-menu-divider {
-  height: 1px;
-  margin: 5px 4px;
-  background: var(--mcx-color-border);
-}
-
-.density-control { display: flex; align-items: center; }
-.density-icon { width: 14px; height: 14px; flex: 0 0 auto; }
-.source-filter-button, .density-trigger {
-  font-size: var(--mcx-text-sm);
-  font-weight: 400;
-  color: var(--mcx-color-icon-tertiary);
-}
-.density-trigger { padding-inline: 8px; }
-.density-menu { left: auto; right: 0; width: 76px; }
-.density-menu .source-option { display: flex; justify-content: space-between; }
-.density-menu .source-option[aria-selected="true"]::after { content: "✓"; }
-.density-menu .source-option:focus-visible { outline-offset: -2px; }
-
-.group-button[aria-pressed="true"] {
-  color: var(--mcx-color-text-foreground);
-  background: var(--mcx-color-background-button-secondary-hover);
-}
-
-.secondary-button,
-.primary-button,
-.icon-button {
-  min-height: 32px;
-  border: 1px solid transparent;
-  border-radius: var(--mcx-radius-md);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 0 12px;
-  color: inherit;
-  cursor: pointer;
-  font-size: var(--mcx-text-sm);
-  font-weight: 500;
-  text-decoration: none;
-  transition: background-color 120ms ease, border-color 120ms ease, opacity 120ms ease;
-}
-
-.secondary-button {
-  border-color: var(--mcx-color-border);
-  background: var(--mcx-color-background-button-secondary);
-}
-
-.secondary-button:hover { background: var(--mcx-color-background-button-secondary-hover); }
-
-.primary-button {
-  color: var(--mcx-color-text-primary-solid);
-  background: var(--mcx-color-background-primary-solid);
-}
-
-.primary-button:hover { opacity: 0.88; }
-.primary-button:disabled { opacity: 0.45; cursor: default; }
-
-.icon-button {
-  width: 28px;
-  min-height: 28px;
-  padding: 0;
-  color: var(--mcx-color-icon-tertiary);
-  background: transparent;
-}
-
-.icon-button:hover { background: var(--mcx-color-background-button-tertiary-hover); }
-.icon-button:disabled { opacity: 0.45; cursor: default; }
-
-.lucide {
-  width: 16px;
-  height: 16px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.loading-ring-icon { display: none; }
-.rescan-button.is-loading { color: var(--mcx-color-text-foreground-secondary); }
-.rescan-button.is-loading .refresh-icon { display: none; }
-.rescan-button.is-loading .loading-ring-icon {
-  display: block;
-  animation: refresh-spin 700ms linear infinite;
-}
-
-@keyframes refresh-spin {
-  to { transform: rotate(360deg); }
-}
-
-.secondary-button:focus-visible,
-.primary-button:focus-visible,
-.icon-button:focus-visible,
-.toolbar-button:focus-visible,
-.source-option:focus-visible,
-.density-trigger:focus-visible,
-.image-card:focus-visible,
-.thread-board:focus-visible {
-  outline: 2px solid var(--mcx-color-border-focus);
-  outline-offset: 2px;
-}
-
-.image-grid {
-  --image-grid-gap: 16px;
-  --grid-columns: 4;
-  padding: 0 var(--library-gutter) 48px;
-  display: grid;
-  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
-  grid-auto-rows: 1px;
-  column-gap: var(--image-grid-gap);
-  row-gap: 0;
-  align-items: start;
-}
-
-.page-sentinel {
-  height: 1px;
-  margin-top: -1px;
-}
-
-.image-card,
-.thread-board {
-  position: relative;
-  width: 100%;
-  margin: 0 0 var(--image-grid-gap);
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--library-card-border);
-  border-radius: var(--library-card-radius);
-  box-shadow: var(--library-card-shadow);
-  display: block;
-  color: var(--mcx-color-text-foreground);
-  background: var(--mcx-color-token-main-surface-primary);
-  cursor: pointer;
-  text-align: left;
-  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
-}
-
-.image-card.is-wide {
-  --library-card-shadow: 0 4px 16px 0 light-dark(rgb(0 0 0 / 7%), rgb(0 0 0 / 20%));
-}
-
-.image-card.is-selected {
-  outline: 2px solid var(--mcx-color-border-focus);
-  outline-offset: 3px;
-}
-
-.image-card img {
-  width: 100%;
-  height: auto;
-  display: block;
-  background: var(--mcx-color-token-bg-primary);
-}
-
-.thread-board-preview {
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-  background: var(--mcx-color-border);
-}
-
-.thread-board-preview img {
-  width: 100%;
-  height: auto;
-  min-height: 76px;
-  aspect-ratio: 16 / 6;
-  display: block;
-  object-fit: cover;
-  background: var(--mcx-color-token-bg-primary);
-}
-
-.thread-board-preview.is-single img {
-  min-height: 180px;
-  aspect-ratio: auto;
-  object-fit: contain;
-}
-
-.thread-board-overflow {
-  position: absolute;
-  right: 8px;
-  bottom: 8px;
-  min-width: 32px;
-  height: 24px;
-  padding: 0 7px;
-  border: 1px solid rgb(255 255 255 / 20%);
-  border-radius: 7px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  background: rgb(20 20 20 / 76%);
-  backdrop-filter: blur(8px);
-  font-size: var(--mcx-text-xs);
-  font-variant-numeric: tabular-nums;
-}
-
-.thread-board-caption {
-  min-height: 80px;
-  padding: 12px 16px;
-  border-top: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 2px;
-  background: var(--mcx-color-token-main-surface-primary);
-  font-size: var(--mcx-text-xs);
-  white-space: nowrap;
-}
-
-.thread-board-title {
-  overflow: hidden;
-  color: var(--mcx-color-text-foreground);
-  font-weight: 500;
-  text-overflow: ellipsis;
-}
-
-.thread-board-meta {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  color: var(--mcx-color-text-foreground-tertiary);
-  font-variant-numeric: tabular-nums;
-}
-
-.card-caption {
-  position: absolute;
-  inset: auto 10px 10px;
-  min-height: 48px;
-  padding: 8px 12px;
-  border: 1px solid var(--mcx-color-border-subtle);
-  border-radius: var(--mcx-radius-lg);
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  background: color-mix(in srgb, var(--mcx-color-token-main-surface-primary) 94%, transparent);
-  backdrop-filter: blur(12px);
-  font-size: var(--mcx-text-xs);
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 120ms ease;
-}
-
-.image-card:hover .card-caption,
-.image-card:focus-visible .card-caption { opacity: 1; }
-
-@media (hover: none) {
-  .card-caption { opacity: 1; }
-}
-
-.source-value {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--mcx-color-text-foreground-secondary);
-}
-
-.source-value > span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.source-icon {
-  width: 14px;
-  height: 14px;
-  flex: 0 0 auto;
-}
-
-.card-source { font-weight: 500; }
-.card-time { color: var(--mcx-color-text-foreground-tertiary); }
-
-.empty-state {
-  width: min(420px, calc(100% - 48px));
-  margin: 18vh auto 0;
-  padding: 28px;
-  text-align: center;
-}
-
-.empty-state h2 { font-size: var(--mcx-text-base); font-weight: 600; }
-.empty-state p { margin-top: 6px; color: var(--mcx-color-text-foreground-secondary); font-size: var(--mcx-text-sm); }
-
-.status-announcer {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.detail-drawer {
-  position: absolute;
-  z-index: 4;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 80%;
-  overflow: hidden;
-  border-left: 1px solid var(--mcx-color-border);
-  background: var(--mcx-color-token-main-surface-primary);
-  transform: translateX(32px);
-  opacity: 0;
-  visibility: hidden;
-  pointer-events: none;
-  contain: layout paint;
-  overscroll-behavior: contain;
-  will-change: transform, opacity;
-  transition:
-    transform 160ms cubic-bezier(0.23, 1, 0.32, 1),
-    opacity 120ms cubic-bezier(0.23, 1, 0.32, 1),
-    visibility 0s linear 160ms;
-}
-
-.drawer-open .detail-drawer {
-  transform: translateX(0);
-  opacity: 1;
-  visibility: visible;
-  pointer-events: auto;
-  transition-delay: 0s;
-  transition-duration: 200ms, 160ms, 0s;
-}
-
-.drawer-surface {
-  width: 100%;
-  min-width: 0;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: var(--mcx-color-token-main-surface-primary);
-}
-
-.drawer-open .image-grid {
-  --image-grid-gap: 16px;
-  padding: 0 20px 20px;
-  grid-template-columns: 1fr;
-}
-.drawer-open .image-card .card-caption { display: none; }
-.drawer-open .library-header { padding-inline: 20px; }
-.drawer-open .library-header h1 { font-size: var(--text-heading-sm); }
-
-.drawer-header {
-  flex: 0 0 auto;
-  justify-content: space-between;
-  padding: 0 var(--library-detail-gutter);
-  border-bottom: 0;
-}
-
-.drawer-scroll {
-  min-height: 0;
-  flex: 1 1 auto;
-  overflow: auto;
-  overscroll-behavior: contain;
-}
-
-.drawer-figure {
-  margin: 0;
-  padding: 0;
-  display: grid;
-  place-items: center;
-  background: transparent;
-}
-
-/* Native-token image editor: tokens arrive from RuntimeHost with the active Codex theme. */
-.image-editor { position: relative; margin: 0 var(--library-detail-gutter) 8px; border-radius: var(--library-card-radius); background: transparent; }
-.image-editor [hidden] { display: none !important; }
-.image-editor-controls { position: sticky; z-index: 6; top: 0; border-radius: var(--library-card-radius) var(--library-card-radius) 0 0; background: transparent; }
-.image-editor-toolbar { position: relative; display: flex; justify-content: center; min-height: 48px; padding: 8px 16px; }
-.image-edit-actions, .image-edit-mode { display: flex; min-width: 0; align-items: center; gap: 2px; padding: 2px; overflow: hidden; border-radius: 9999px; background: color-mix(in srgb, var(--mcx-color-surface-tertiary) 95%, transparent); box-shadow: 0 0 0 1px var(--mcx-color-border-subtle), var(--mcx-shadow-md); backdrop-filter: blur(4px); }
-.image-edit-action, .image-edit-mode button { display: inline-flex; height: 28px; align-items: center; justify-content: center; gap: 4px; border: 1px solid transparent; border-radius: 999px; padding: 0 6px; background: transparent; color: var(--mcx-color-text-foreground); font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-base); font-weight: var(--mcx-font-weight-normal); line-height: 18px; white-space: nowrap; cursor: pointer; }
-.image-edit-action:hover, .image-edit-action[aria-expanded="true"], .image-edit-mode button:hover { background: var(--mcx-color-background-primary-ghost-hover); }
-.image-edit-action:focus-visible, .image-edit-mode button:focus-visible, .image-zoom-trigger:focus-visible, .image-edit-menu button:focus-visible { outline: 1px solid var(--mcx-color-border-focus); outline-offset: 1px; }
-.image-edit-mode button:disabled { color: var(--mcx-color-text-foreground-tertiary); cursor: default; }
-.image-edit-mode > span { min-width: 0; overflow: hidden; padding: 0 6px; color: var(--mcx-color-text-foreground-tertiary); font-size: var(--mcx-text-base); line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
-.image-edit-mode button { width: 28px; padding: 0; flex: 0 0 auto; }
-.image-edit-mode button > svg { width: 16px; height: 16px; fill: currentColor; }
-.image-edit-mode button[aria-label="Redo"] > svg { transform: scaleX(-1); }
-.image-edit-mode [data-edit-cancel] { color: var(--mcx-color-text-foreground-tertiary); }
-.image-edit-mode [data-edit-cancel] > svg { width: 14px; height: 14px; }
-.image-edit-mode [data-edit-send] { width: auto; padding: 0 6px; background: var(--mcx-color-chart-blue); color: var(--mcx-color-text-inverse); }
-.image-edit-mode [data-edit-send]:hover { background: color-mix(in srgb, var(--mcx-color-chart-blue) 90%, transparent); }
-.image-edit-mode [data-edit-send]:disabled { color: var(--mcx-color-text-inverse); opacity: .4; }
-.image-zoom-trigger { position: absolute; top: 8px; right: 10px; height: 28px; display: inline-flex; align-items: center; gap: 2px; border: 1px solid transparent; border-radius: var(--mcx-radius-lg); padding: 0 8px; background: transparent; color: var(--mcx-color-text-foreground-tertiary); cursor: pointer; font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-sm); font-weight: var(--mcx-font-weight-normal); line-height: 20px; font-variant-numeric: tabular-nums; }
-.image-zoom-trigger:hover, .image-zoom-trigger[aria-expanded="true"] { background: var(--mcx-color-background-primary-ghost-hover); }
-.image-zoom-trigger [data-zoom-chevron] { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .5; }
-.image-edit-menu { position: absolute; z-index: 8; width: 160px; padding: 4px; border: 0; border-radius: var(--mcx-radius-xl); background: color-mix(in srgb, var(--mcx-color-surface-elevated-secondary) 90%, transparent); box-shadow: 0 0 0 .5px var(--mcx-color-border), var(--mcx-shadow-xl); backdrop-filter: blur(4px); }
-.image-edit-menu button { display: flex; width: 100%; align-items: center; gap: 6px; border: 0; border-radius: var(--mcx-radius-lg); padding: 5px 8px; background: transparent; color: var(--mcx-color-text-foreground); font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-sm); font-weight: var(--mcx-font-weight-normal); line-height: var(--mcx-text-sm--line-height); text-align: left; cursor: pointer; }
-.image-edit-menu button:hover { background: var(--mcx-color-background-primary-ghost-hover); }
-.image-ratio-label { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
-.image-ratio-label small { margin: 0; color: var(--mcx-color-text-foreground-tertiary); font-size: inherit; }
-.image-ratio-icon { display: block; width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; opacity: .75; }
-.image-menu-check { width: 17px; height: 17px; flex: 0 0 auto; fill: currentColor; opacity: .75; }
-.image-menu-check.is-hidden { visibility: hidden; }
-.image-menu-separator { height: 1px; margin: 0 8px; background: var(--mcx-color-border); }
-.image-zoom-menu { width: 136px; padding: 6px; border-radius: 10px; }
-.image-zoom-menu button { border-radius: 6px; padding: 5px 5px 5px 8px; line-height: 20px; }
-.image-editor-stage { position: relative; overflow: auto; border-radius: var(--library-card-radius); touch-action: none; }
-.image-editor-stage img { transform-origin: center; transition: transform 120ms ease-out; }
-.image-edit-mask, .image-comment-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
-.image-edit-mask { cursor: crosshair; opacity: .5; color: var(--mcx-color-text-accent); }
-.image-comment-layer { pointer-events: none; }
-.image-comment-marker { position: absolute; display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; color: var(--mcx-color-text-accent); font-family: var(--mcx-font-sans-default); transform: translate(-50%, -50%); }
-button.image-comment-marker { pointer-events: auto; cursor: pointer; }
-.image-comment-marker > svg { position: absolute; inset: 0; width: 30px; height: 30px; fill: currentColor; overflow: visible; stroke: white; stroke-width: 1.65; }
-.image-comment-marker > span { position: relative; z-index: 1; color: white; font-size: 10px; font-weight: 700; line-height: 10px; transform: translate(-1px, -1px); }
-.image-comment-popover { position: absolute; z-index: 4; width: min(294px, calc(100% - 16px)); height: 44px; padding: 8px 8px 8px 16px; border: 0; border-radius: 22px; background: var(--mcx-color-surface-elevated-secondary); box-shadow: 0 0 0 1px var(--mcx-color-border-subtle), var(--mcx-shadow-md); }
-.image-comment-popover input { width: 100%; height: 28px; border: 0; padding: 0; outline: 0; background: transparent; color: var(--mcx-color-token-input-foreground); font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-base); font-weight: var(--mcx-font-weight-normal); line-height: 21px; }
-.image-comment-popover.is-existing-comment { height: 120px; padding: 8px 12px 8px 16px; }
-.image-comment-popover textarea { display: block; width: 100%; height: 60px; resize: none; border: 0; padding: 2px 0 0; outline: 0; background: transparent; color: var(--mcx-color-token-input-foreground); font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-base); font-weight: var(--mcx-font-weight-normal); line-height: 24px; }
-.image-comment-editor-footer { height: 44px; display: flex; align-items: end; justify-content: space-between; }
-.image-comment-editor-actions { display: flex; gap: 6px; }
-.image-comment-editor-footer button { height: 28px; border: 1px solid var(--mcx-color-border); border-radius: 999px; padding: 0 8px; background: color-mix(in srgb, var(--mcx-color-token-main-surface-primary) 96%, transparent); color: var(--mcx-color-text-foreground); font-family: var(--mcx-font-sans-default); font-size: var(--mcx-text-sm); font-weight: var(--mcx-font-weight-normal); line-height: 18px; cursor: pointer; }
-.image-comment-editor-footer button:hover { background: var(--mcx-color-background-primary-ghost-hover); }
-.image-comment-editor-footer .image-comment-delete { width: 28px; padding: 0; border-color: transparent; background: transparent; }
-.image-comment-delete > svg { width: 20px; height: 20px; fill: currentColor; }
-.image-comment-editor-footer .image-comment-save { border-color: transparent; background: var(--mcx-color-background-primary-solid); color: var(--mcx-color-text-button-primary); }
-.image-comment-editor-footer button:disabled { cursor: default; opacity: .4; }
-.image-brush-slider { position: absolute; z-index: 3; top: 50%; left: 16px; transform: translateY(-50%) rotate(-90deg); transform-origin: center; }
-.image-brush-slider input { accent-color: var(--mcx-color-text-accent); }
-.image-edit-menu[data-resize-menu] { top: 48px; left: 50%; transform: translateX(-50%); }
-.image-zoom-menu { top: 48px; right: 10px; }
-.image-edit-action > svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
-.image-edit-action > [data-native-image-icon="resize"] { width: 18px; height: 18px; }
-@media (max-width: 520px) { .image-edit-action span { display: none; } .image-edit-action { width: 28px; padding: 0; } }
-
-.drawer-figure img {
-  width: auto;
-  height: auto;
-  max-width: 100%;
-  max-height: min(68vh, 720px);
-  display: block;
-  object-fit: contain;
-  border-radius: var(--mcx-radius-md);
-}
-
-.detail-section {
-  margin: 0 var(--library-detail-gutter);
-  padding: 24px 0;
-  border-top: 0;
-}
-
-.detail-section + .detail-section { border-top: 1px solid var(--mcx-color-border-subtle); }
-
-.detail-section h3 {
-  margin-bottom: 10px;
-  color: var(--mcx-color-text-foreground);
-  font-size: var(--mcx-text-sm);
-  font-weight: 600;
-}
-
-.detail-section-heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.detail-section-heading h3 { margin-bottom: 0; }
-.detail-section-heading + .drawer-prompt { margin-top: 10px; }
-
-.prompt-copy-button {
-  width: 26px;
-  min-height: 26px;
-  flex: 0 0 auto;
-}
-
-.prompt-copy-button.is-copied {
-  color: var(--mcx-color-text-foreground);
-  background: var(--mcx-color-background-button-secondary);
-}
-.prompt-copy-button svg[hidden] { display: none; }
-
-.drawer-prompt {
-  overflow-wrap: anywhere;
-  white-space: pre-wrap;
-  color: var(--mcx-color-text-foreground-secondary);
-  font-size: var(--mcx-text-sm);
-  line-height: 1.75;
-}
-
-.drawer-prompt.is-loading,
-.drawer-prompt.is-missing { color: var(--mcx-color-text-foreground-tertiary); }
-
-.image-information { margin: 0; }
-
-.image-information div {
-  min-height: 32px;
-  padding: 6px 0;
-  display: grid;
-  grid-template-columns: 86px minmax(0, 1fr);
-  gap: 12px;
-}
-
-.image-information div[hidden] { display: none; }
-
-.image-information dt {
-  color: var(--mcx-color-text-foreground-tertiary);
-  font-size: var(--mcx-text-xs);
-}
-
-.image-information dd {
-  min-width: 0;
-  margin: 0;
-  color: var(--mcx-color-text-foreground-secondary);
-  font-size: var(--mcx-text-xs);
-  font-variant-numeric: tabular-nums;
-}
-
-.drawer-actions {
-  min-height: 56px;
-  padding: 10px var(--library-detail-gutter);
-  flex: 0 0 auto;
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 144px));
-  justify-content: end;
-  gap: 12px;
-  border-top: 1px solid var(--mcx-color-border);
-  background: var(--mcx-color-token-main-surface-primary);
-}
-
-.source-action {
-  min-width: 0;
-  position: relative;
-  display: flex;
-}
-
-.source-button { width: 100%; }
-.save-button { width: 100%; }
-.drawer-actions button { min-height: 34px; padding-block: 6px; border-radius: 999px; }
-.library-header .rescan-button,
-.toolbar-actions .group-button,
-.drawer-close { width: 36px; min-height: 36px; border-radius: 999px; }
-/* 补偿热区与 SVG 内部留白，让叉号本身贴齐图片区域右缘。 */
-.drawer-close { margin-right: -14px; }
-
-.source-action.is-disabled .source-button {
-  pointer-events: none;
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.source-tooltip {
-  position: absolute;
-  z-index: 2;
-  left: 50%;
-  bottom: calc(100% + 8px);
-  width: max-content;
-  max-width: min(260px, 70vw);
-  padding: 6px 8px;
-  border: 1px solid var(--mcx-color-border-heavy);
-  border-radius: 7px;
-  color: var(--mcx-color-text-foreground);
-  background: var(--mcx-color-background-elevated-primary-opaque);
-  box-shadow: var(--mcx-shadow-xl);
-  font-size: var(--mcx-text-xs);
-  font-weight: 400;
-  line-height: 1.35;
-  text-align: center;
-  transform: translateX(-50%);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 100ms ease, visibility 100ms ease;
-  pointer-events: none;
-}
-
-.source-tooltip[hidden] { display: none; }
-
-.source-action.is-disabled:hover .source-tooltip {
-  opacity: 1;
-  visibility: visible;
-}
-
-@media (max-width: 640px) {
-  .detail-drawer {
-    position: fixed;
-    z-index: 10;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 100vw;
-    transform: translateX(100%);
-  }
-
-  .drawer-open .detail-drawer {
-    width: 100vw;
-    transform: translateX(0);
-  }
-
-  .drawer-surface {
-    width: 100%;
-    min-width: 0;
-  }
-}
-
-@container (max-width: 820px) {
-  .image-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-
-@container (max-width: 520px) {
-  .library-header { gap: 8px; }
-  .library-toolbar { gap: 4px; }
-  .source-filter-button { max-width: 130px; padding-inline: 10px; }
-  .filter-source-icon, .filter-count, .density-icon { display: none; }
-  .toolbar-actions { gap: 2px; }
-  .density-control { padding: 0; }
-  .image-grid { grid-template-columns: 1fr; }
-}
-
-@media (max-width: 520px) {
-  :root { --library-gutter: 16px; --library-detail-gutter: 16px; --library-card-radius: 16px; }
-  .library-header, .drawer-header { height: 60px; }
-  .library-header h1 { font-size: 20px; }
-  .image-grid { --image-grid-gap: 16px; padding: 0 16px 16px; }
-  .drawer-figure { padding: 0; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* 浮条锚定内容区，既不占据网格空间，也不随图片滚动。 */
-.library-feed { position: relative; display: flex; flex: 1; min-height: 0; }
-.library-feed > .library-scroll { width: 100%; }
-.new-images-chip {
-  position: absolute; z-index: 5; top: 12px; left: 50%; transform: translateX(-50%);
-  display: flex; align-items: center; gap: 8px;
-  min-height: 36px; padding: 8px 16px; border: 1px solid var(--mcx-color-border);
-  border-radius: 999px; background: var(--mcx-color-surface-elevated-secondary);
-  color: var(--mcx-color-text-foreground); font: 500 13px/18px var(--mcx-font-sans-default);
-  box-shadow: 0 2px 6px #0000000a, 0 8px 24px #00000014;
-  white-space: nowrap; cursor: pointer; -webkit-app-region: no-drag;
-}
-.new-images-chip:hover { background: var(--mcx-color-background-panel); }
-.new-images-chip:focus-visible { outline: 2px solid var(--mcx-color-border-focus); outline-offset: 3px; }
-.new-images-arrow { font-size: 18px; line-height: 18px; }
-.new-images-chip[hidden], .drawer-open .new-images-chip, .thread-context .new-images-chip { display: none; }