[data-vision-tab='split'] .ld-canvas { isolation: isolate; }
[data-vision-tab='split'] .ld-canvas-group { position: absolute; inset: 0; isolation: isolate; pointer-events: none; }
[data-vision-tab='split'] .ld-canvas-group .ld-canvas-layer { pointer-events: auto; }
[data-vision-tab='split'] .ld-background-black { background: #000; }
[data-vision-tab='split'] .ld-background-white { background: #fff; }
[data-vision-tab='split'] .ld-source-compare { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
[data-vision-tab='split'] .ld-canvas-toolbar { flex-wrap: wrap; height: auto; gap: 4px; }
[data-vision-tab='split'] .ld-canvas-toolbar button { min-height: 40px; }
.ld-export-menu { display: inline-flex; align-items: center; gap: 6px; }
.ld-export-menu select,
.ld-model-select select { min-height: 34px; border: 1px solid #e0e4eb; border-radius: 10px; padding: 0 10px; background: #fff; color: #3e4754; font-size: 12px; }
.ld-export-menu select:focus,
.ld-model-select select:focus { outline: 0; border-color: #7566e8; box-shadow: 0 0 0 3px rgba(117,102,232,.12); }
.ld-model-select { display: grid; gap: 5px; margin: 10px 12px; padding: 10px; border: 1px solid #ece9fb; border-radius: 12px; background: linear-gradient(145deg,#fbfaff,#f7f6fd); }
.ld-model-select label { color: #5f5a88; font-size: 11px; font-weight: 700; }
.ld-model-select small { color: #8a879f; font-size: 10px; line-height: 1.45; }
.ld-model-select input[type='file'] { width: 100%; font-size: 11px; color: #686f7b; }
.ld-tree-spacer { flex: 1; }
.ld-tree-row > button:last-of-type { min-width: 28px; }
.reference-mini b { position: absolute; top: 6px; right: 6px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(24,28,39,.68); color: #fff; opacity: 0; transition: opacity .18s ease; }
.reference-mini:hover b, .reference-mini:focus-visible b { opacity: 1; }
.reference-mini:focus-visible, .reference-drop-card:focus-visible { outline: 3px solid rgba(112,89,235,.28); outline-offset: 2px; }
@media (max-width: 720px) {
  .ld-export-menu { width: 100%; }
  .ld-export-menu select { flex: 1; min-height: 42px; }
  .ld-export-menu button { min-height: 42px; }
  .ld-model-select { margin: 10px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-mini, .reference-drop-card, .reference-mini b { transition: none; }
}
.ld-review-modal { max-height: 88dvh; overflow: auto; }
.ld-review-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ld-review-layer { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--border, #d6dce6); border-radius: 10px; cursor: pointer; }
.ld-review-layer img { width: 100%; height: 120px; object-fit: contain; background: repeating-conic-gradient(#e7e9ee 0 25%, #fff 0 50%) 50%/16px 16px; }
.ld-review-layer input, .ld-review-independent input { min-width: 22px; min-height: 22px; }
.ld-review-independent { display: flex; align-items: center; gap: 10px; margin: 16px 0; line-height: 1.6; }
.ld-review-error { color: var(--danger, #a93e49); min-height: 1.5em; }
.ld-alpha-modal { max-height: 92dvh; overflow: auto; }
.ld-alpha-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.ld-alpha-tools input { width: 72px; }
.ld-alpha-stage { display: grid; place-items: center; max-height: 60dvh; overflow: auto; background: repeating-conic-gradient(#c5ccd7 0 25%, #fff 0 50%) 50%/16px 16px; }
.ld-alpha-stage canvas { display: block; max-width: 100%; max-height: 60dvh; object-fit: contain; touch-action: none; }
.ld-review-modal, .ld-alpha-modal { min-width: 0; max-width: calc(100vw - 24px); overflow-wrap: anywhere; }
.ld-review-modal .ld-edit-modal-head > div, .ld-alpha-modal .ld-edit-modal-head > div { min-width: 0; flex: 1; }
.ld-review-modal .ld-edit-modal-head > button, .ld-alpha-modal .ld-edit-modal-head > button { flex: 0 0 36px; }
.ld-review-layer { min-width: 0; }
.ld-review-independent input { flex-shrink: 0; }
.ld-review-modal .ld-modal-actions, .ld-alpha-modal .ld-modal-actions { flex-wrap: wrap; }
[data-vision-tab='split'] :is(.ld-editor-top strong, .ld-panel-head strong, .ld-tree-row strong, .ld-layer-plan-list strong) { min-width: 0; overflow-wrap: anywhere; }
[data-vision-tab='split'] .ld-editor-top > div { min-width: 0; }
[data-vision-tab='split'] :is(.ld-tree-main span:last-child, .ld-layer-row > span:nth-child(2)) { min-width: 0; }
[data-vision-tab='split'] :is(.ld-tree-main strong, .ld-layer-row strong) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) {
  .ld-review-modal, .ld-alpha-modal { width: calc(100vw - 24px); padding: 12px; }
  .ld-review-layers { grid-template-columns: minmax(0, 1fr); }
  .ld-review-modal .ld-modal-actions button, .ld-alpha-modal .ld-modal-actions button { flex: 1 1 120px; min-height: 44px; height: auto; }
}
@media (pointer: coarse) {
  [data-vision-tab='split'] .ld-canvas-toolbar button, .ld-review-modal button, .ld-alpha-modal button { min-height: 44px; }
}

.ld-classic-composer .ld-chips {
  min-height: 34px;
  height: auto;
  flex-wrap: wrap;
}
.ld-classic-composer .ld-chips .ld-model-select.is-inline {
  margin-left: auto;
}
.ld-plan-head { align-items: center; }
.ld-model-select.is-inline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.ld-model-select.is-inline label { white-space: nowrap; font-size: 10px; }
.ld-model-select.is-inline select { min-height: 30px; max-width: 210px; }

@media (max-width: 720px) {
  .ld-classic-composer .ld-chips .ld-model-select.is-inline {
    width: auto;
    margin-left: 0;
  }
  .ld-plan-head { align-items: flex-start; gap: 8px; flex-wrap: wrap; }
  .ld-model-select.is-inline { width: 100%; }
  .ld-model-select.is-inline select { flex: 1; max-width: none; min-height: 40px; }
}

/* Match the reference composer geometry: the upload/thumbnail rail sits on
   the left of the prompt, while the model controls stay below the prompt. */
.prompt-dock[data-composer='vision'] {
  min-height: 224px;
  padding: 12px 14px 10px;
  background: #fff;
  border-color: #e1e5eb;
  color: #27313d;
  box-shadow: 0 14px 36px rgba(33, 43, 60, .08);
}
.prompt-dock[data-composer='vision'] .vision-composer-body {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  grid-template-rows: minmax(132px, auto) auto;
  gap: 10px 14px;
  min-width: 0;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 132px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 8;
  transition: width .26s cubic-bezier(.22,.8,.2,1);
}
.prompt-dock[data-composer='vision'] .vision-reference-slot:hover,
.prompt-dock[data-composer='vision'] .vision-reference-slot:focus-within {
  width: min(420px, calc(100vw - 32px));
  justify-content: flex-start;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray {
  position: relative;
  display: block;
  width: 96px;
  height: 132px;
  max-width: none;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini,
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card {
  flex: 0 0 64px;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  height: 124px;
  min-height: 124px;
  max-height: 124px;
  padding: 5px;
  border-radius: 14px;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini {
  align-items: stretch;
  justify-content: flex-end;
  background: #f5f7fa;
  border-color: #e0e5ec;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .vision-reference-image {
  position: absolute;
  left: 0;
  top: 0;
  z-index: calc(10 - var(--ref-index, 0));
  transform: translate3d(calc(var(--ref-index, 0) * 6px), calc(var(--ref-index, 0) * 2px), 0);
  transition: transform .26s cubic-bezier(.22,.8,.2,1), box-shadow .2s ease, filter .2s ease;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot:hover .vision-reference-image,
.prompt-dock[data-composer='vision'] .vision-reference-slot:focus-within .vision-reference-image {
  transform: translate3d(calc(var(--ref-index, 0) * 68px), 0, 0);
  z-index: calc(20 + var(--ref-index, 0));
}
.prompt-dock[data-composer='vision'] .vision-reference-slot:hover .vision-reference-image:hover,
.prompt-dock[data-composer='vision'] .vision-reference-slot:focus-within .vision-reference-image:focus-within {
  transform: translate3d(calc(var(--ref-index, 0) * 68px), -3px, 0) scale(1.03);
}
.prompt-dock[data-composer='vision'] .vision-composer-body .dock-input-row {
  transition: filter .24s ease, opacity .24s ease, transform .24s ease;
}
.prompt-dock[data-composer='vision'] .vision-composer-body:has(.vision-reference-slot:hover) .dock-input-row,
.prompt-dock[data-composer='vision'] .vision-composer-body:has(.vision-reference-slot:focus-within) .dock-input-row,
.prompt-dock[data-composer='vision'] .vision-composer-body.is-reference-hover .dock-input-row {
  filter: blur(2.5px);
  opacity: .72;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini img {
  width: 100%;
  height: 112px;
  border-radius: 10px;
  object-fit: cover;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini > span,
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card strong,
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card small {
  display: none;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card {
  display: grid;
  place-items: center;
  border: 1px dashed #cbd3dd;
  background: #fafbfc;
  color: #657181;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #edf0f4;
  color: #566271;
  font-size: 27px;
  line-height: 40px;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card strong,
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card small {
  display: block;
  max-width: 84px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card strong {
  color: #3f4a58;
  font-size: 11px;
  font-weight: 700;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card small {
  color: #8a94a1;
  font-size: 9px;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray.has-reference {
  position: relative;
  overflow: visible;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray.has-reference .reference-drop-card {
  position: absolute;
  right: -4px;
  bottom: -4px;
  z-index: 4;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(28, 39, 50, .16);
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray.has-reference .reference-drop-card span {
  width: 32px;
  height: 32px;
  background: #e5e9ee;
  color: #4f5c6a;
  font-size: 20px;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-remove-button {
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  opacity: 1;
  background: rgba(9, 15, 18, .78);
  font-size: 13px;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.prompt-dock[data-composer='vision'] .dock-input-row {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: end;
  min-width: 0;
}
.prompt-dock[data-composer='vision'] .dock-input-row textarea {
  min-height: 132px;
  max-height: 380px;
  resize: vertical;
  border: 0;
  outline: none;
  padding: 10px 4px 8px;
  background: transparent;
  color: #27313d;
  font-size: 13px;
  line-height: 1.6;
}
.prompt-dock[data-composer='vision'] .dock-input-row textarea::placeholder { color: #8a94a1; }
.prompt-dock[data-composer='vision'] .dock-input-row textarea:focus { box-shadow: none; }
.prompt-dock[data-composer='vision'] .send-button {
  width: 48px;
  height: 48px;
  align-self: end;
  border-radius: 50%;
  background: #202b36;
  color: #fff;
  box-shadow: 0 8px 18px rgba(20, 32, 43, .16);
}
.prompt-dock[data-composer='vision'] .dock-top {
  grid-column: 1 / -1;
  grid-row: 2;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0;
}
.prompt-dock[data-composer='vision'] .dock-top::-webkit-scrollbar { display: none; }
.prompt-dock[data-composer='vision'] .dock-chip,
.prompt-dock[data-composer='vision'] .select-trigger,
.prompt-dock[data-composer='vision'] .credit-cost-chip {
  border-color: transparent;
  background: transparent;
  color: #5f6b79;
}
.prompt-dock[data-composer='vision'] .dock-chip:hover,
.prompt-dock[data-composer='vision'] .select-trigger:hover,
.prompt-dock[data-composer='vision'] .credit-cost-chip:hover { background: #f5f7fa; color: #303b49; }
.prompt-dock[data-composer='vision'] .credit-cost-chip strong { color: #303949; }
.prompt-dock[data-composer='vision'] .credit-cost-chip svg { color: #665fff; }
.prompt-dock[data-composer='vision'] .mode-switch { background: #f2f4f7; border-color: #e0e4ea; }
.prompt-dock[data-composer='vision'] .mode-switch button { color: #7b8593; }
.prompt-dock[data-composer='vision'] .mode-switch button.active { color: #4f57db; }

/* Keep upward menus outside the scroll clipping edge.  `overflow-x: auto`
   computes a non-visible y overflow in browsers, which used to slice the
   menu down to a thin line above the rail. */
.prompt-dock[data-composer='vision'] .dock-top {
  position: relative;
  z-index: 140;
  overflow: visible;
  align-items: center;
}
.prompt-dock[data-composer='vision'] .dock-top .select-control { position: relative; z-index: 141; }
.prompt-dock[data-composer='vision'] .dock-top .select-control.open { z-index: 160; }
.prompt-dock[data-composer='vision'] .dock-top .select-popover { z-index: 1200; }

/* The professional-tone skin supplies a more specific textarea background;
   the reference layout uses the frame itself as the surface. */
.mode-page[data-page='vision'].professional-tone .prompt-dock[data-composer='vision'] .dock-input-row textarea {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Match the control rail to the 52px submit action and keep every control on
   one baseline, as in the approved reference composition. */
.prompt-dock[data-composer='vision'] .dock-top > .select-control > .select-trigger,
.prompt-dock[data-composer='vision'] .dock-top > .dock-chip,
.prompt-dock[data-composer='vision'] .dock-top > .credit-cost-chip {
  height: 52px;
  min-height: 52px;
  border: 1px solid #d9d2ff;
  border-radius: 13px;
  padding-inline: 12px;
  background: #faf9ff;
  color: #4d4a91;
}
.prompt-dock[data-composer='vision'] .dock-top > .select-control > .select-trigger .model-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
}
.prompt-dock[data-composer='vision'] .dock-top > .select-control > .select-trigger .resolution-mark {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  border-radius: 7px;
}
.prompt-dock[data-composer='vision'] .dock-top > .mode-switch {
  height: 52px;
  min-height: 52px;
  border: 1px solid #d9d2ff;
  border-radius: 13px;
  padding: 4px;
  background: #f7f5ff;
}
.prompt-dock[data-composer='vision'] .dock-top > .mode-switch .mode-switch-thumb {
  top: 4px;
  bottom: 4px;
  border-radius: 9px;
}

@media (max-width: 720px) {
  .prompt-dock[data-composer='vision'] {
    min-height: 190px;
    padding: 10px 10px 8px;
    border-radius: 18px;
  }
  .prompt-dock[data-composer='vision'] .vision-composer-body {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-rows: minmax(96px, auto) auto;
    gap: 8px;
  }
  .prompt-dock[data-composer='vision'] .vision-reference-slot { min-height: 96px; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot:hover,
  .prompt-dock[data-composer='vision'] .vision-reference-slot:focus-within {
    width: min(300px, calc(100vw - 22px));
  }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray { width: 66px; height: 96px; max-width: none; max-height: none; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini,
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card {
    flex-basis: 64px;
    width: 64px;
    min-width: 64px;
    height: 88px;
    min-height: 88px;
  }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini img { height: 76px; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card span { width: 32px; height: 32px; font-size: 22px; line-height: 32px; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card strong { font-size: 10px; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card small { font-size: 8px; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot:hover .vision-reference-image,
  .prompt-dock[data-composer='vision'] .vision-reference-slot:focus-within .vision-reference-image {
    transform: translate3d(calc(var(--ref-index, 0) * 54px), 0, 0);
  }
  .prompt-dock[data-composer='vision'] .vision-composer-body:has(.vision-reference-slot:hover) .dock-input-row,
  .prompt-dock[data-composer='vision'] .vision-composer-body:has(.vision-reference-slot:focus-within) .dock-input-row,
  .prompt-dock[data-composer='vision'] .vision-composer-body.is-reference-hover .dock-input-row {
    filter: blur(1.5px);
    opacity: .78;
  }
  .prompt-dock[data-composer='vision'] .dock-input-row textarea { min-height: 96px; max-height: 300px; font-size: 13px; }
  .prompt-dock[data-composer='vision'] .dock-top { gap: 3px; }
  .prompt-dock[data-composer='vision'] .dock-chip,
  .prompt-dock[data-composer='vision'] .select-trigger,
  .prompt-dock[data-composer='vision'] .credit-cost-chip { padding-inline: 6px; font-size: 10px; }
}

/* Keep the same reference composer geometry when the light professional skin
   is active; the reference screenshot is intentionally dark and compact. */
.mode-page[data-page='vision'].professional-tone .prompt-dock[data-composer='vision'] {
  background: #fff !important;
  border-color: #e1e5eb !important;
  color: #27313d !important;
}

/* Final visual contract for the vision composer.  The prompt surface and the
   control rail are intentionally separate: the reference card and copy area
   share one inset frame, while all model controls and the wide submit action
   sit on the rail below it. */
.prompt-dock[data-composer='vision'] {
  min-height: 292px;
  padding: 8px 10px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 54px;
  gap: 8px;
  background: #fff;
  border: 1px solid #e2e7ed;
  border-radius: 22px;
  color: #27313d;
  box-shadow: 0 14px 36px rgba(33, 43, 60, .08);
  overflow: visible;
}
.prompt-dock[data-composer='vision'] .vision-composer-body {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0 10px;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  border: 1px solid #dde4eb;
  border-radius: 20px;
  background: #fff;
  overflow: visible;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  position: relative;
  z-index: 8;
  transition: width .26s cubic-bezier(.22, .8, .2, 1);
}
.prompt-dock[data-composer='vision'] .vision-reference-slot:hover,
.prompt-dock[data-composer='vision'] .vision-reference-slot:focus-within {
  width: min(520px, calc(100vw - 32px));
  justify-content: flex-start;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray {
  position: relative;
  display: block;
  width: 146px;
  height: 194px;
  max-width: none;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 0;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini,
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card {
  flex: 0 0 142px;
  width: 142px;
  min-width: 142px;
  max-width: 142px;
  height: 194px;
  min-height: 194px;
  max-height: 194px;
  padding: 5px;
  border-radius: 16px;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini {
  align-items: stretch;
  justify-content: flex-end;
  background: #f5f7fa;
  border-color: #e0e5ec;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini img {
  width: 100%;
  height: 182px;
  border-radius: 11px;
  object-fit: cover;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .vision-reference-image {
  left: 0;
  top: 0;
  transform: translate3d(calc(var(--ref-index, 0) * 6px), calc(var(--ref-index, 0) * 2px), 0);
  transition: transform .26s cubic-bezier(.22, .8, .2, 1), box-shadow .2s ease, filter .2s ease;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot:hover .vision-reference-image,
.prompt-dock[data-composer='vision'] .vision-reference-slot:focus-within .vision-reference-image {
  transform: translate3d(calc(var(--ref-index, 0) * 112px), 0, 0);
  z-index: calc(20 + var(--ref-index, 0));
}
.prompt-dock[data-composer='vision'] .vision-reference-slot:hover .vision-reference-image:hover,
.prompt-dock[data-composer='vision'] .vision-reference-slot:focus-within .vision-reference-image:focus-within {
  transform: translate3d(calc(var(--ref-index, 0) * 112px), -3px, 0) scale(1.03);
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card {
  display: grid;
  place-items: center;
  border: 1px dashed #cbd3dd;
  background: #fafbfc;
  color: #657181;
  cursor: pointer;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #edf0f4;
  color: #566271;
  font-size: 32px;
  line-height: 48px;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini > span,
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card strong,
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card small {
  display: none;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card strong,
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card small {
  display: block;
  max-width: 126px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card strong {
  color: #3f4a58;
  font-size: 13px;
  font-weight: 700;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card small {
  color: #8a94a1;
  font-size: 10px;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray.has-reference .reference-drop-card {
  right: -4px;
  bottom: -4px;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-remove-button {
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  opacity: 1;
  background: rgba(9, 15, 18, .78);
  font-size: 14px;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}
.prompt-dock[data-composer='vision'] .dock-input-row {
  grid-column: 2;
  grid-row: 1;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 28px 24px 18px 0;
  transition: filter .24s ease, opacity .24s ease, transform .24s ease;
}
.prompt-dock[data-composer='vision'] .vision-composer-body:has(.vision-reference-slot:hover) .dock-input-row,
.prompt-dock[data-composer='vision'] .vision-composer-body:has(.vision-reference-slot:focus-within) .dock-input-row,
.prompt-dock[data-composer='vision'] .vision-composer-body.is-reference-hover .dock-input-row {
  filter: blur(2.5px);
  opacity: .72;
}
.prompt-dock[data-composer='vision'] .dock-input-row textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  resize: none;
  border: 0;
  outline: none;
  padding: 0;
  background: transparent;
  color: #27313d;
  font-size: 15px;
  line-height: 1.6;
}
.prompt-dock[data-composer='vision'] .dock-input-row textarea::placeholder { color: #8a94a1; }
.prompt-dock[data-composer='vision'] .dock-input-row textarea:focus { box-shadow: none; }
.prompt-dock[data-composer='vision'] .dock-top {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  padding: 0 2px 0 8px;
}
.prompt-dock[data-composer='vision'] .dock-top::-webkit-scrollbar { display: none; }
.prompt-dock[data-composer='vision'] .dock-top > * { flex: 0 0 auto; }
.prompt-dock[data-composer='vision'] .send-button {
  flex: 0 0 240px;
  width: 240px;
  min-width: 240px;
  height: 52px;
  margin-left: auto;
  border-radius: 13px;
  background: #202b36;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(20, 32, 43, .16);
}
.prompt-dock[data-composer='vision'] .send-button svg { width: 25px; height: 25px; }
.prompt-dock[data-composer='vision'] .dock-chip,
.prompt-dock[data-composer='vision'] .select-trigger,
.prompt-dock[data-composer='vision'] .credit-cost-chip {
  border-color: transparent;
  background: transparent;
  color: #5f6b79;
}
.prompt-dock[data-composer='vision'] .dock-chip:hover,
.prompt-dock[data-composer='vision'] .select-trigger:hover,
.prompt-dock[data-composer='vision'] .credit-cost-chip:hover { background: #f5f7fa; color: #303b49; }
.prompt-dock[data-composer='vision'] .credit-cost-chip strong { color: #303949; }
.prompt-dock[data-composer='vision'] .credit-cost-chip svg { color: #665fff; }
.prompt-dock[data-composer='vision'] .mode-switch { background: #f2f4f7; border-color: #e0e4ea; }
.prompt-dock[data-composer='vision'] .mode-switch button { color: #7b8593; }
.prompt-dock[data-composer='vision'] .mode-switch button.active { color: #4f57db; }

@media (max-width: 720px) {
  .prompt-dock[data-composer='vision'] {
    min-height: 210px;
    padding: 8px;
    grid-template-rows: minmax(0, 1fr) 54px;
    gap: 7px;
    border-radius: 18px;
  }
  .prompt-dock[data-composer='vision'] .vision-composer-body {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0 8px;
    padding: 6px;
    border-radius: 16px;
  }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray { width: 78px; height: 120px; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini,
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card {
    flex-basis: 74px;
    width: 74px;
    min-width: 74px;
    height: 112px;
    min-height: 112px;
  }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini img { height: 100px; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-drop-card span { width: 32px; height: 32px; font-size: 22px; line-height: 32px; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card strong { font-size: 10px; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray:not(.has-reference) .reference-drop-card small { font-size: 8px; }
  .prompt-dock[data-composer='vision'] .vision-reference-slot:hover .vision-reference-image,
  .prompt-dock[data-composer='vision'] .vision-reference-slot:focus-within .vision-reference-image { transform: translate3d(calc(var(--ref-index, 0) * 54px), 0, 0); }
  .prompt-dock[data-composer='vision'] .dock-input-row { padding: 18px 12px 10px; }
  .prompt-dock[data-composer='vision'] .dock-input-row textarea { font-size: 14px; }
  .prompt-dock[data-composer='vision'] .dock-top { min-height: 50px; gap: 5px; padding-left: 2px; }
  .prompt-dock[data-composer='vision'] .dock-chip,
  .prompt-dock[data-composer='vision'] .select-trigger,
  .prompt-dock[data-composer='vision'] .credit-cost-chip { padding-inline: 6px; font-size: 10px; }
  .prompt-dock[data-composer='vision'] .send-button { flex-basis: 136px; width: 136px; min-width: 136px; height: 44px; border-radius: 12px; }
  .prompt-dock[data-composer='vision'] .send-button svg { width: 22px; height: 22px; }
}

/* Desktop menu escape hatch: the rail is wide enough to show every control,
   so it must not become a scrollport that clips upward menus. */
@media (min-width: 721px) {
  .prompt-dock[data-composer='vision'] .dock-top {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }
}

/* Reference rail layering contract: the newest uploaded image is the top
   card, while the add entry remains reachable above the whole stack. */
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray.has-reference .vision-reference-image {
  z-index: calc(20 + var(--ref-index, 0));
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray.has-reference > .reference-drop-card {
  z-index: 100;
  pointer-events: auto;
}
.prompt-dock[data-composer='vision'] .vision-reference-slot .reference-mini-tray > .reference-drop-card span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  color: #fff !important;
  background: #111827 !important;
  line-height: 1;
  text-align: center;
}