minecodex 0.1.0

package/features/images/web/styles.css

@@ -0,0 +1,994 @@
+:root {
+  color-scheme: light;
+  --codex-base-accent: #339cff;
+  --color-token-main-surface-primary: #fff;
+  --color-token-bg-primary: #f9f9f9;
+  --color-token-bg-secondary: color-mix(in srgb, #f9f9f9 92%, transparent);
+  --color-background-elevated-primary-opaque: #fff;
+  --color-background-panel: #f5f5f5;
+  --color-background-primary-solid: #1a1c1f;
+  --color-text-primary-solid: #fff;
+  --color-background-button-secondary: color-mix(in oklab, #1a1c1f 5%, transparent);
+  --color-background-button-secondary-hover: color-mix(in oklab, #1a1c1f 8%, transparent);
+  --color-background-button-tertiary-hover: color-mix(in oklab, #1a1c1f 7%, transparent);
+  --color-text-foreground: #1a1c1f;
+  --color-text-foreground-secondary: color-mix(in oklab, #1a1c1f 70%, transparent);
+  --color-text-foreground-tertiary: color-mix(in oklab, #1a1c1f 50%, transparent);
+  --color-icon-tertiary: rgb(13 13 13 / 48.4%);
+  --color-text-accent: #087ccf;
+  --color-border: color-mix(in oklab, #1a1c1f 8%, transparent);
+  --color-border-heavy: color-mix(in oklab, #1a1c1f 14%, transparent);
+  --color-border-focus: #339cff;
+  --color-token-scrollbar-slider-background: var(--color-border);
+  --color-token-scrollbar-slider-hover-background: var(--color-border-heavy);
+  --color-token-scrollbar-slider-active-background: var(--color-border-heavy);
+  --color-token-list-hover-background: color-mix(in oklab, #1a1c1f 5%, transparent);
+  --color-token-input-background: #f3f3f3;
+  --color-token-input-border: color-mix(in oklab, #1a1c1f 14%, transparent);
+  --color-token-input-foreground: #1a1c1f;
+  --color-token-input-placeholder-foreground: color-mix(in oklab, #1a1c1f 50%, transparent);
+  --font-sans-default: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --default-mono-font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
+  --text-heading-md: 20px;
+  --text-heading-sm: 18px;
+  --text-base: 14px;
+  --text-sm: 13px;
+  --text-xs: 12px;
+  --radius-md: 10px;
+  --radius-lg: 12.5px;
+  --radius-xl: 15px;
+  --shadow-xl: 0 8px 30px rgb(0 0 0 / 14%);
+  font-family: var(--font-sans-default);
+  background: var(--color-token-main-surface-primary);
+  color: var(--color-text-foreground);
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --color-token-main-surface-primary: #181818;
+  --color-token-bg-primary: #141414;
+  --color-token-bg-secondary: color-mix(in srgb, #141414 92%, transparent);
+  --color-background-elevated-primary-opaque: #363636;
+  --color-background-panel: #232323;
+  --color-background-primary-solid: #fff;
+  --color-text-primary-solid: #2d2d2d;
+  --color-background-button-secondary: rgb(255 255 255 / 5.2%);
+  --color-background-button-secondary-hover: rgb(255 255 255 / 7.8%);
+  --color-background-button-tertiary-hover: rgb(255 255 255 / 6.8%);
+  --color-text-foreground: #fff;
+  --color-text-foreground-secondary: rgb(255 255 255 / 71%);
+  --color-text-foreground-tertiary: rgb(255 255 255 / 49.8%);
+  --color-icon-tertiary: color-mix(in oklab, #fff 50%, transparent);
+  --color-text-accent: #83c3ff;
+  --color-border: rgb(255 255 255 / 8.4%);
+  --color-border-heavy: rgb(255 255 255 / 15.6%);
+  --color-border-focus: rgb(131 195 255 / 76%);
+  --color-token-list-hover-background: rgb(255 255 255 / 7.8%);
+  --color-token-input-background: rgb(45 45 45 / 96%);
+  --color-token-input-border: rgb(255 255 255 / 15.6%);
+  --color-token-input-foreground: #fff;
+  --color-token-input-placeholder-foreground: rgb(255 255 255 / 49.8%);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    --color-token-main-surface-primary: #181818;
+    --color-token-bg-primary: #141414;
+    --color-token-bg-secondary: color-mix(in srgb, #141414 92%, transparent);
+    --color-background-elevated-primary-opaque: #363636;
+    --color-background-panel: #232323;
+    --color-background-primary-solid: #fff;
+    --color-text-primary-solid: #2d2d2d;
+    --color-background-button-secondary: rgb(255 255 255 / 5.2%);
+    --color-background-button-secondary-hover: rgb(255 255 255 / 7.8%);
+    --color-background-button-tertiary-hover: rgb(255 255 255 / 6.8%);
+    --color-text-foreground: #fff;
+    --color-text-foreground-secondary: rgb(255 255 255 / 71%);
+    --color-text-foreground-tertiary: rgb(255 255 255 / 49.8%);
+    --color-icon-tertiary: color-mix(in oklab, #fff 50%, transparent);
+    --color-text-accent: #83c3ff;
+    --color-border: rgb(255 255 255 / 8.4%);
+    --color-border-heavy: rgb(255 255 255 / 15.6%);
+    --color-border-focus: rgb(131 195 255 / 76%);
+    --color-token-list-hover-background: rgb(255 255 255 / 7.8%);
+    --color-token-input-background: rgb(45 45 45 / 96%);
+    --color-token-input-border: rgb(255 255 255 / 15.6%);
+    --color-token-input-foreground: #fff;
+    --color-token-input-placeholder-foreground: rgb(255 255 255 / 49.8%);
+  }
+}
+
+* { box-sizing: border-box; }
+
+html,
+body {
+  min-height: 100%;
+  margin: 0;
+  background: var(--color-token-main-surface-primary);
+}
+
+body {
+  min-width: 320px;
+  color: var(--color-text-foreground);
+  font: 400 var(--text-base)/1.5 var(--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(--color-token-main-surface-primary);
+}
+
+.library-pane {
+  width: 100%;
+  min-width: 0;
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  container-type: inline-size;
+  background: var(--color-token-main-surface-primary);
+  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(--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(--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(--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(--color-token-scrollbar-slider-active-background);
+}
+
+.library-header,
+.drawer-header {
+  height: 46px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-token-main-surface-primary);
+}
+
+.library-header {
+  flex: 0 0 auto;
+  z-index: 4;
+  justify-content: space-between;
+  padding: 0 10px 0 16px;
+}
+
+.identity {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+}
+
+h1,
+h2,
+h3,
+p { margin: 0; }
+
+h1,
+.drawer-header h2 {
+  font-size: var(--text-base);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.library-toolbar {
+  min-height: 42px;
+  padding: 0 10px 0 12px;
+  flex: 0 0 auto;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-token-main-surface-primary);
+}
+
+.drawer-open .library-pane,
+.thread-context .library-pane {
+  width: 20%;
+  transform: translateX(-8px);
+  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: 28px;
+  min-width: 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 8px;
+  color: var(--color-text-foreground-secondary);
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--text-xs);
+  font-weight: 500;
+}
+
+.toolbar-button:hover,
+.toolbar-button[aria-expanded="true"] {
+  color: var(--color-text-foreground);
+  background: var(--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(--color-text-foreground-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.filter-count {
+  flex: 0 0 auto;
+  min-width: 20px;
+  padding: 2px 5px;
+  border-radius: 5px;
+  background: var(--color-background-button-secondary);
+  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: transparent; }
+.source-filter-button[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }
+
+.source-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  z-index: 20;
+  border: 1px solid var(--color-border-heavy);
+  border-radius: var(--radius-md);
+  background: var(--color-background-elevated-primary-opaque);
+  box-shadow: var(--shadow-xl);
+}
+
+.source-menu[hidden] { display: none; }
+
+.source-menu {
+  left: 0;
+  width: 240px;
+  max-height: min(342px, calc(100vh - 108px));
+  padding: 5px;
+  overflow-y: auto;
+}
+
+.source-option {
+  width: 100%;
+  min-height: 32px;
+  border: 0;
+  border-radius: 7px;
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 8px;
+  color: var(--color-text-foreground-secondary);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font-size: var(--text-xs);
+}
+
+.source-option:hover,
+.source-option[aria-selected="true"] {
+  color: var(--color-text-foreground);
+  background: var(--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(--color-border);
+}
+
+.density-control {
+  height: 28px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 4px 0 7px;
+  color: var(--color-text-foreground-tertiary);
+}
+
+.density-icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+}
+
+.density-slider {
+  width: 92px;
+  height: 18px;
+  margin: 0;
+  appearance: none;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.density-slider::-webkit-slider-runnable-track {
+  height: 4px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--color-border-heavy);
+}
+
+.density-slider::-webkit-slider-thumb {
+  width: 10px;
+  height: 10px;
+  margin-top: -3px;
+  appearance: none;
+  border: 0;
+  border-radius: 50%;
+  background: var(--color-text-foreground-secondary);
+}
+
+.density-slider:hover::-webkit-slider-thumb {
+  background: var(--color-text-foreground);
+}
+
+.density-slider::-moz-range-track {
+  height: 4px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--color-border-heavy);
+}
+
+.density-slider::-moz-range-thumb {
+  width: 10px;
+  height: 10px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--color-text-foreground-secondary);
+}
+
+.density-button-value {
+  min-width: 10px;
+  font-size: 10px;
+  text-align: center;
+}
+
+.group-button[aria-pressed="true"] {
+  color: var(--color-text-foreground);
+  background: var(--color-background-button-secondary-hover);
+}
+
+.secondary-button,
+.primary-button,
+.icon-button {
+  min-height: 32px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 12px;
+  color: inherit;
+  cursor: pointer;
+  font-size: var(--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(--color-border);
+  background: var(--color-background-button-secondary);
+}
+
+.secondary-button:hover { background: var(--color-background-button-secondary-hover); }
+
+.primary-button {
+  color: var(--color-text-primary-solid);
+  background: var(--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(--color-icon-tertiary);
+  background: transparent;
+}
+
+.icon-button:hover { background: var(--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(--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-slider:focus-visible,
+.image-card:focus-visible,
+.thread-board:focus-visible {
+  outline: 2px solid var(--color-border-focus);
+  outline-offset: 2px;
+}
+
+.image-grid {
+  --image-grid-gap: 16px;
+  --grid-columns: 3;
+  padding: 18px 20px 36px;
+  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 {
+  width: 100%;
+  margin: 0 0 var(--image-grid-gap);
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  display: block;
+  color: var(--color-text-foreground);
+  background: var(--color-token-bg-secondary);
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+.image-card:hover,
+.image-card.is-selected,
+.thread-board:hover {
+  border-color: var(--color-border-heavy);
+  background: var(--color-token-list-hover-background);
+}
+
+.image-card:hover,
+.thread-board:hover { transform: translateY(-1px); }
+
+.image-card img {
+  width: 100%;
+  height: auto;
+  display: block;
+  background: var(--color-token-bg-primary);
+}
+
+.thread-board-preview {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: var(--color-border);
+}
+
+.thread-board-preview img {
+  width: 100%;
+  min-height: 76px;
+  aspect-ratio: 16 / 6;
+  display: block;
+  object-fit: cover;
+  background: var(--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(--text-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.thread-board-caption {
+  min-height: 72px;
+  padding: 8px 10px 9px;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  background: var(--color-background-panel);
+  font-size: var(--text-xs);
+  white-space: nowrap;
+}
+
+.thread-board-title {
+  overflow: hidden;
+  color: var(--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(--color-text-foreground-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.card-caption {
+  min-height: 54px;
+  padding: 7px 10px 8px;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: 2px;
+  background: var(--color-background-panel);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.source-value {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--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(--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(--text-base); font-weight: 600; }
+.empty-state p { margin-top: 6px; color: var(--color-text-foreground-secondary); font-size: var(--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(--color-border);
+  background: var(--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(--color-token-main-surface-primary);
+}
+
+.drawer-open .image-grid {
+  --image-grid-gap: 12px;
+  grid-template-columns: 1fr;
+}
+.drawer-open .image-card .card-caption { display: none; }
+
+.drawer-header {
+  flex: 0 0 auto;
+  justify-content: space-between;
+  padding: 0 9px 0 16px;
+  border-bottom: 0;
+}
+
+.drawer-scroll {
+  min-height: 0;
+  flex: 1 1 auto;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.drawer-figure {
+  min-height: 180px;
+  margin: 0;
+  padding: 16px;
+  display: grid;
+  place-items: center;
+  background: var(--color-token-bg-primary);
+}
+
+.drawer-figure img {
+  max-width: 100%;
+  max-height: min(68vh, 720px);
+  display: block;
+  object-fit: contain;
+  border-radius: var(--radius-md);
+}
+
+.detail-section {
+  padding: 16px;
+  border-top: 1px solid var(--color-border);
+}
+
+.detail-section h3 {
+  margin-bottom: 10px;
+  color: var(--color-text-foreground);
+  font-size: var(--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(--color-text-foreground);
+  background: var(--color-background-button-secondary);
+}
+.prompt-copy-button svg[hidden] { display: none; }
+
+.drawer-prompt {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  color: var(--color-text-foreground-secondary);
+  font-size: var(--text-sm);
+  line-height: 1.55;
+}
+
+.drawer-prompt.is-loading,
+.drawer-prompt.is-missing { color: var(--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(--color-text-foreground-tertiary);
+  font-size: var(--text-xs);
+}
+
+.image-information dd {
+  min-width: 0;
+  margin: 0;
+  color: var(--color-text-foreground-secondary);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.drawer-actions {
+  min-height: 56px;
+  padding: 10px 12px;
+  flex: 0 0 auto;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 200px));
+  justify-content: end;
+  gap: 12px;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-token-main-surface-primary);
+}
+
+.source-action {
+  min-width: 0;
+  position: relative;
+  display: flex;
+}
+
+.source-button { width: 100%; }
+.save-button { width: 100%; }
+
+.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(--color-border-heavy);
+  border-radius: 7px;
+  color: var(--color-text-foreground);
+  background: var(--color-background-elevated-primary-opaque);
+  box-shadow: var(--shadow-xl);
+  font-size: var(--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-toolbar { padding-left: 8px; }
+  .density-slider { width: 64px; }
+  .density-button-value { display: none; }
+  .image-grid { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 520px) {
+  .image-grid {
+    padding: 10px;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}