/* Input panel - reference-image entry (shared by Home and Create composers): vertical 参考图 label and tooltip pill. */

/* Reference-image entry (shared by home and create composers): a vertical
   "参考图" label sits in the empty strip left of the add button, and the
   group carries the hover/focus tooltip that explains the supported
   upload methods. The native `title` on the button was replaced by this
   tooltip so both never render at once. */
.reference-add-group {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

/* The three characters are separate flex items stacked top-to-bottom so the
   column can never wrap or scatter: the label stretches to the full row
   height and space-between spreads 参/考/图 evenly from top to bottom. */
.reference-side-label {
  flex: 0 0 auto;
  align-self: stretch;
  box-sizing: border-box;
  width: 18px;
  /* Keep the 参/考/图 span inside the neighboring + box's height so the
     characters never touch or exceed the box edges and read as centered
     against it (user request, 2026-07). 5px per side: the 3×14px chars +
     2×6px gaps = 54px fit the 64px row with an even 5px margin top/bottom. */
  padding: 5px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  /* Same tone as the "图像功能" picker trigger label. */
  color: rgba(255, 255, 255, 0.45);
  user-select: none;
  cursor: default;
}

.reference-side-label i {
  display: block;
  font-style: normal;
}

/* With thumbnails present the controls collapse into the top-right cluster;
   the label only makes sense on the empty-state row. */
.upload-card.has-images .reference-add-group {
  display: none;
}

/* Tooltip pill for the reference entry. Hover-only trigger plus
   :focus-visible (keyboard) on purpose: the file picker leaves focus on the
   button after closing, so a :focus-within trigger would make the pill
   linger uninvited (2026-07 fix). */
/* Neutral black palette, matched to the create page's tapnow chrome
   (#0f0f0f prompt box / #181818 cost pill / 10-15% white hairline borders)
   instead of the earlier purple tint, which clashed with the page. */
.reference-add-group[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
  white-space: nowrap;
  padding: 7px 11px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #161616;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  color: rgba(245, 245, 245, 0.85);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2px;
  writing-mode: horizontal-tb;
  pointer-events: none;
  z-index: 80;
}

.reference-add-group[data-tooltip]:hover::after,
.reference-add-group[data-tooltip] .reference-add-button:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition: opacity 150ms ease, transform 150ms ease;
}