#task-panel :is(.detail-reference-button > img, img.pattern-upload-thumb) {
  cursor: zoom-in;
}

.reference-source-popover {
  position: fixed;
  z-index: 12000;
  display: grid;
  gap: 6px;
  width: 156px;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #d9e2f1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px #24365326;
  --reference-menu-offset: -6px;
  animation: reference-menu-enter 160ms cubic-bezier(.22, 1, .36, 1) both;
}
.reference-source-popover[data-placement="top"] { --reference-menu-offset: 6px; }
@keyframes reference-menu-enter {
  from { opacity: 0; transform: translateY(var(--reference-menu-offset)); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reference-source-popover { animation: none; }
}
/* Bridge the vertical gap so moving down into the menu does not dismiss it. */
.reference-source-popover::before {
  content: "";
  position: absolute;
  inset: -10px 0;
  z-index: -1;
}
.reference-source-popover button {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid #d9e2f1;
  border-radius: 8px;
  background: #f7f9fc;
  color: #35445e;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}
#reference-source-popover button:is(:hover, :focus-visible, :active) {
  background: #2979ff !important;
  border-color: #2979ff !important;
  color: #fff !important;
  outline: none;
}
html[data-theme="dark"] .reference-source-popover {
  background: #202632;
  border-color: #424d63;
}
html[data-theme="dark"] .reference-source-popover button {
  background: #2a3242;
  color: #e1e7f1;
  border-color: #424d63;
}
html[data-theme="dark"] #reference-source-popover button:is(:hover, :focus-visible, :active) {
  background: #2979ff !important;
  border-color: #2979ff !important;
  color: #fff !important;
}
@layer desktop-fixed-rails {
/* Shared full-width reference cards; half-width cards retain their own layout. */
html body.feature-focus-mode.workstation-feature-mode[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline {
  --reference-card-height: 92px;
  --reference-copy-top: 45px;
  --reference-copy-y: -50%;
  --reference-preview-height: 68px;
  --reference-preview-top: 11px;
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  height: var(--reference-card-height) !important;
  min-height: 92px !important;
  contain: layout paint;
  transition: height 180ms cubic-bezier(.4, 0, .2, 1) 80ms, background-color 160ms ease, border-color 160ms ease !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: default;
  border: 1px solid var(--free-control-line, #d9e2f1) !important;
  border-radius: 10px !important;
  background: var(--free-control-surface, #f7f9fc) !important;
  color: var(--free-control-ink, #35445e) !important;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline > .upload-icon {
  position: absolute !important;
  left: 16px !important;
  top: var(--reference-copy-top) !important;
  width: 40px !important;
  height: 40px !important;
  background: url("/images/site-assets/free-upload-folder.png") center/contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  transform: translateY(var(--reference-copy-y)) !important;
  transition: top 220ms ease, transform 220ms ease !important;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline > .upload-copy {
  position: absolute !important;
  left: 64px !important;
  top: var(--reference-copy-top) !important;
  max-width: calc(52% - 64px) !important;
  margin: 0 !important;
  transform: translateY(var(--reference-copy-y)) !important;
  transition: top 220ms ease, transform 220ms ease !important;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .upload-copy strong { font-size: 14px !important; font-weight: 500 !important; color: var(--free-control-ink, #35445e) !important; }
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .upload-copy small { font-size: 12px !important; font-weight: 400 !important; color: var(--reference-muted, #8491a7) !important; }
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .secondary-reference-preview-strip {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  top: var(--reference-preview-top) !important;
  right: 24px !important;
  width: calc(48% - 24px) !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--reference-preview-height) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: height 220ms ease, top 220ms ease !important;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .secondary-reference-preview-strip[hidden] { display: none !important; }
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .single-upload-preview-card {
  display: block !important;
  position: relative !important;
  flex: 0 0 auto !important;
  width: var(--reference-preview-height) !important;
  height: var(--reference-preview-height) !important;
  min-height: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  transform: none !important;
  transition: width 220ms ease, height 220ms ease !important;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .single-upload-preview-card img {
  border-radius: 6px !important;
  object-fit: contain !important;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .reference-inline-actions {
  position: absolute !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  left: 12px;
  right: 12px;
  top: 101px;
  height: 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  will-change: opacity, transform;
  transition: opacity 90ms ease 80ms, transform 90ms ease 80ms, visibility 0s linear 170ms;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .reference-inline-actions button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 32px !important;
  padding: 0 6px !important;
  border: 1px solid var(--free-control-line, #d9e2f1) !important;
  border-radius: 7px !important;
  background: var(--free-control-surface, #f7f9fc) !important;
  color: var(--free-control-ink, #35445e) !important;
  font: inherit;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap;
  cursor: pointer;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .reference-inline-actions svg { width: 14px; height: 14px; flex-shrink: 0; }
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .reference-inline-actions button :is(span, svg) { color: inherit !important; font-weight: 500 !important; }
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline .reference-inline-actions button:is(:hover, :focus-visible) {
  background: #2979ff !important;
  border-color: #2979ff !important;
  color: white !important;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline :is(button:focus-visible),
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline:focus-visible { outline: 2px solid #6386fa !important; outline-offset: -2px; }
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline:not(.is-uploading):not([aria-disabled="true"]):not([data-inline-upload-rest]):is(:hover, :focus-visible, :has(:focus-visible)) {
  --reference-card-height: 144px;
  background: #eef3ff !important;
  border-color: #aabfff !important;
  transition: height 240ms cubic-bezier(.22, 1, .36, 1), background-color 160ms ease, border-color 160ms ease !important;
}
html[data-theme="dark"] body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline:not(.is-uploading):not([aria-disabled="true"]):not([data-inline-upload-rest]):is(:hover, :focus-visible, :has(:focus-visible)) {
  background: #303f60 !important;
  border-color: #7798f2 !important;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline:not(.is-uploading):not([aria-disabled="true"]):not([data-inline-upload-rest]):is(:hover, :focus-visible, :has(:focus-visible)) .reference-inline-actions {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity 120ms ease 80ms, transform 120ms cubic-bezier(.22, 1, .36, 1) 80ms, visibility 0s linear 80ms;
}
html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline.is-uploading::after { display: none !important; }
@media (hover: none), (pointer: coarse) {
  html body.feature-focus-mode.workstation-feature-mode[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline:not(.is-uploading):not([aria-disabled="true"]) {
    --reference-card-height: 144px;
  }
  html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline:not(.is-uploading):not([aria-disabled="true"]) .reference-inline-actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body.feature-focus-mode.workstation-feature-mode[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline,
  html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline * { transition: none !important; }
}

html body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
}

html[data-theme="dark"] body[data-active-feature] #task-panel #dynamic-settings .reference-upload-inline {
  --free-control-surface: #242c3a;
  --free-control-ink: #e1e7f1;
  --free-control-line: #424d63;
  --reference-muted: #a6b3c9;
}

}