/* JiMeng-style reference group. The upload card and local previews share one
   anchored rail; expanding the group overlays the prompt instead of reflowing it. */
.reference-strip {
  position: relative;
  z-index: 12;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  width: 64px;
  height: 84px;
  margin: 0;
  padding: 0;
  overflow: visible;
  display: block;
  pointer-events: none;
}
.reference-strip[hidden] { display: block; }
.reference-list {
  position: relative;
  width: 64px;
  height: 84px;
  min-height: 84px;
  overflow: visible;
  scrollbar-width: none;
  pointer-events: auto;
  flex: 0 0 auto;
  transition: width .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
.reference-list::-webkit-scrollbar { display: none; }
.reference-card,
.reference-add {
  position: absolute !important;
  left: 8px;
  top: 10px;
  box-sizing: border-box;
  width: var(--reference-card-width, 48px) !important;
  min-width: var(--reference-card-width, 48px);
  height: var(--reference-card-height, 64px) !important;
  margin: 0;
  transform: translateX(var(--reference-stack-x, 0)) rotate(var(--reference-rotate, 0deg));
  transform-origin: 24px 32px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s cubic-bezier(.4,0,.2,1), box-shadow .2s ease;
  pointer-events: auto;
  will-change: transform, opacity;
}
.reference-add {
  left: 45px;
  top: 63px;
  width: 22px !important;
  min-width: 22px;
  height: 22px !important;
  border-radius: 50% !important;
  transform: rotate(0deg);
  transform-origin: 24px 32px;
}
.reference-card {
  border-radius: 10px;
  animation: reference-card-in .26s cubic-bezier(.2,.8,.2,1) both;
}
.reference-card.is-dragging { opacity: .35; }
.reference-card.drag-target .reference-view { border-color: #7de5ff; box-shadow: 0 0 0 2px #7de5ff55; }
.reference-view {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ffffff2a;
  border-radius: 9px;
  background: #263237;
  color: #eafaff;
  cursor: pointer;
  box-shadow: 0 5px 16px #0005;
  transition: transform .22s cubic-bezier(.4,0,.2,1), border-color .2s ease, box-shadow .2s ease;
}
.reference-card:hover .reference-view,
.reference-card:focus-within .reference-view {
  border-color: #a8ecfa;
  box-shadow: 0 12px 25px #0008, 0 0 0 1px #a8ecfa66;
}
.reference-card:active .reference-view { box-shadow: 0 5px 14px #0006; }
.reference-view img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reference-image-loading {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, #29353a 20%, #526970 43%, #29353a 68%);
  background-size: 240% 100%;
  animation: reference-shimmer 1.15s linear infinite;
}
.reference-remove {
  position: absolute;
  z-index: 6;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  padding: 0;
  border: 1px solid #ffffff66;
  border-radius: 50%;
  background: #151b1d;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
}
.reference-card:hover .reference-remove,
.reference-card:focus-within .reference-remove,
.reference-remove:focus-visible { opacity: 1; transform: scale(1); }
.reference-remove:hover { background: #af584f; }
.reference-number { display: none; }
.reference-retry {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 7;
  padding: 3px 4px;
  border: 0;
  border-radius: 3px;
  background: #a9554b;
  color: #fff;
  font-size: 9px;
}
.reference-card[data-state='error'] .reference-view { border-color: #df7c6c; }
.reference-error { color: #ffb4a8; font-weight: 700; font-size: 17px; }
.reference-add {
  display: grid !important;
  place-content: center;
  gap: 0;
  padding: 0 !important;
  border: 1px dotted #ffffff66 !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  color: #d8f6fb !important;
  box-shadow: 0 5px 16px #0004;
  cursor: pointer;
  opacity: 1;
  transition: transform .3s cubic-bezier(.4,0,.2,1), border-color .2s ease, background .2s ease, opacity .2s ease;
}
.reference-add:hover,
.reference-add:focus-visible {
  border-color: #b9f1fb !important;
  background: #36484d !important;
  outline: none;
}
.reference-add:disabled { opacity: .38; cursor: not-allowed; }
.reference-add-icon { display: block; font-size: 27px; font-weight: 300; line-height: 1; }
.reference-add small { display: none; }
.reference-drop-overlay {
  position: absolute;
  inset: 4px;
  z-index: 30;
  display: grid;
  place-content: center;
  gap: 4px;
  border: 1px dashed #8de8fb;
  border-radius: 14px;
  background: #172a31ef;
  color: #def8ff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}
.reference-drop-overlay > span { color: #72d6ff; font-size: 22px; }
.reference-drop-overlay strong { font-size: 14px; }
.reference-drop-overlay small { color: #a6c8d0; font-size: 10px; }
.composer.reference-drag-active .reference-drop-overlay { opacity: 1; transform: none; }
.reference-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.reference-preview-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 16px;
  border: 1px solid #ffffff1e;
  border-radius: 18px;
  background: #181c1e;
  color: #effbff;
  box-shadow: 0 20px 80px #000b;
}
.reference-preview-dialog::backdrop { background: #000b; backdrop-filter: blur(6px); }
.reference-preview-head,
.reference-preview-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reference-preview-head h2 { margin: 0; overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.reference-preview-close { background: transparent; color: #fff; font-size: 22px; }
.reference-preview-image { display: block; width: auto; max-width: 100%; height: min(65dvh, 560px); margin: 14px auto; object-fit: contain; border-radius: 12px; background: #0d1011; }
.reference-preview-bottom button { padding: 6px 12px; border-radius: 8px; background: #26343a; color: #e6faff; }
.reference-preview-dialog p { margin: 12px 0 0; color: #92a4aa; font-size: 11px; }
.send-btn.reference-blocked { background: #53352f !important; color: #ffd4c8 !important; }

/* Keep the reference rail and prompt in one row. The rail grows over the row when
   expanded so reference cards never push footer controls or split on scroll. */
.composer {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: 84px auto;
  column-gap: 9px;
  align-items: stretch;
}
.composer .reference-strip { grid-column: 1; grid-row: 1; }
.composer .prompt-editor {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 84px;
  margin: 0 0 10px;
  padding: 0 4px 0 0;
}
.composer .composer-footer { grid-column: 1 / -1; grid-row: 2; }
.composer.has-references .prompt-editor { margin-left: 0; padding-top: 0; }
.reference-strip.is-expanded { z-index: 24; }
.reference-strip.is-expanded .reference-list {
  max-width: none;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.reference-strip.is-expanded .reference-list::-webkit-scrollbar { display: none; }

@keyframes reference-card-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes reference-shimmer { to { background-position: -240% 0; } }
@media (max-width: 480px) {
  .composer { grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; grid-template-rows: 68px auto; }
  .reference-strip, .reference-list { width: 56px; height: 68px; min-height: 68px; }
  .reference-card { width: 42px !important; min-width: 42px; height: 56px !important; }
  .composer .prompt-editor { min-height: 68px; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-strip, .reference-card, .reference-add, .reference-view, .reference-remove, .reference-drop-overlay { transition: none; }
  .reference-image-loading { animation: none; }
}
html.motion-paused .reference-image-loading { animation-play-state: paused; }





/* Final reference-card geometry: each state has an explicit JiMeng-style baseline. */
/* Empty state is intentionally separate from the single/multi-image states. */
.reference-strip:not(.has-references) .reference-add {
  left: 8px !important;
  top: 1px !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 64px !important;
  border-radius: 2px !important;
  transform: rotate(-10deg) !important;
}/* Empty-state pointer interaction: preserve the -10deg baseline while lifting the
   tile as a whole, so hover/focus never cancels the reference-card angle. */
.reference-strip:not(.has-references) .reference-add:hover,
.reference-strip:not(.has-references) .reference-add:focus-visible {
  border-color: #b9f1fb !important;
  background: #30373b !important;
  box-shadow: 0 10px 22px #0008, 0 0 0 1px #a8ecfa66 !important;
  transform: translateY(-3px) rotate(-10deg) !important;
}
.reference-strip:not(.has-references) .reference-add:active {
  transform: translateY(-1px) rotate(-10deg) !important;
  box-shadow: 0 5px 14px #0006 !important;
}
/* Exactly one image: keep the portrait card in place and overlay the small add
   button on its bottom-right corner, matching JiMeng's single-reference state. */
.reference-strip.has-references:not(.is-expanded):not(.is-collapsed) .reference-card {
  left: 8px !important;
  top: 10px !important;
  transform: none !important;
}
.reference-strip.has-references:not(.is-expanded):not(.is-collapsed) .reference-add {
  left: 33px !important;
  top: 47px !important;
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid #ffffff55 !important;
  background: #30383c !important;
  transform: none !important;
  box-shadow: 0 3px 9px #0009 !important;
}
.reference-strip.has-references:not(.is-expanded):not(.is-collapsed) .reference-add-icon {
  font-size: 19px;
}
.reference-strip.has-references:not(.is-expanded):not(.is-collapsed) .reference-add:hover,
.reference-strip.has-references:not(.is-expanded):not(.is-collapsed) .reference-add:focus-visible {
  transform: translateY(-2px) !important;
  background: #3d4c51 !important;
  border-color: #b9f1fb !important;
  box-shadow: 0 6px 13px #000b, 0 0 0 1px #a8ecfa66 !important;
}
.reference-strip.has-references:not(.is-expanded):not(.is-collapsed) .reference-add:active {
  transform: translateY(-1px) !important;
}
/* Multiple images at rest: all images share one origin and the add tile stays last. */
.reference-strip.is-collapsed .reference-card {
  left: 8px !important;
  top: 10px !important;
  transform: translateX(0) !important;
}
.reference-strip.is-collapsed .reference-add {
  left: 8px !important;
  top: 10px !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 64px !important;
  border-radius: 2px !important;
  transform: translateX(calc(var(--reference-count, 1) * 52px)) !important;
}
/* Multiple images on hover/focus: adjacent 48x64 cards, 4px gap, per-card rotation. */
.reference-strip.is-expanded .reference-card {
  left: 8px !important;
  top: 10px !important;
  transform: translateX(var(--reference-x, 0px)) rotate(var(--reference-rotate, 0deg)) !important;
}
.reference-strip.is-expanded .reference-add {
  left: 8px !important;
  top: 10px !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 64px !important;
  border-radius: 2px !important;
  transform: translateX(var(--reference-add-x, 0px)) rotate(var(--reference-add-rotate, 0deg)) !important;
}
.reference-strip.is-expanded .reference-add:hover,
.reference-strip.is-expanded .reference-add:focus-visible {
  transform: translateX(var(--reference-add-x, 0px)) translateY(-4px) rotate(var(--reference-add-rotate, 0deg)) !important;
}
.reference-strip.is-expanded .reference-card:hover,
.reference-strip.is-expanded .reference-card:focus-within {
  transform: translateX(var(--reference-x, 0px)) translateY(-4px) rotate(var(--reference-rotate, 0deg)) !important;
}