/* Shared picker appearance. Native inputs retain their browser and form behavior. */
input[type="file"] {
  font-family: inherit;
  cursor: pointer;
}

:root input[type="file"]::file-selector-button {
  min-height: 36px;
  margin: 0 12px 0 0;
  padding: 8px 14px;
  border: 1px solid #e0d2f9;
  border-radius: 9px;
  background: #f1eaff;
  color: #5823b7;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

:root input[type="file"]::-webkit-file-upload-button {
  min-height: 36px;
  margin: 0 12px 0 0;
  padding: 8px 14px;
  border: 1px solid #e0d2f9;
  border-radius: 9px;
  background: #f1eaff;
  color: #5823b7;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}

:root input[type="file"]::file-selector-button:hover { background: #e9dcff; }
:root input[type="file"]::-webkit-file-upload-button:hover { background: #e9dcff; }
input[type="file"]:disabled { cursor: not-allowed; }
:root input[type="file"]:disabled::file-selector-button { opacity: .55; cursor: not-allowed; }
:root input[type="file"]:disabled::-webkit-file-upload-button { opacity: .55; cursor: not-allowed; }

/* Visible legacy fields; hidden avatar, chat and media overlays keep their geometry. */
input[type="file"]:is(#campaign_csv_filename, #dataset_filename, #body_image, #body_logo_image, #banner_image, #f-hero-file, #f-video) {
  box-sizing: border-box;
  min-height: 52px !important;
  max-width: 100% !important;
  padding: 7px !important;
  border: 1px solid #e3e9f2 !important;
  border-radius: 12px !important;
  background: #fcfbff !important;
  color: #526583 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}
input[type="file"]:is(#campaign_csv_filename, #dataset_filename, #body_image, #body_logo_image, #banner_image, #f-hero-file, #f-video):focus-visible {
  outline: 3px solid #bba0ef;
  outline-offset: 3px;
}

/* Opt-in upload card. The real input covers the card and remains focusable. */
.ysa-file-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  min-height: 112px;
  padding: 20px;
  border: 1px dashed var(--ysa-file-upload-line, #d4c0f4);
  border-radius: 14px;
  background: var(--ysa-file-upload-soft, #fbf8ff);
  color: #101827;
  cursor: pointer;
  box-sizing: border-box;
}
.ysa-file-upload:hover { border-style: solid; border-color: var(--ysa-file-upload-accent, #7031ef); }
.ysa-file-upload:focus-within { outline: 3px solid #bba0ef; outline-offset: 3px; }
.ysa-file-upload.has-file { border-style: solid; border-color: #a8dccc; background: #f4fcf9; }
.ysa-file-upload:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.ysa-file-upload input[type="file"] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  cursor: inherit;
}
.ysa-file-upload input[type="file"]::file-selector-button {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ysa-file-upload input[type="file"]::-webkit-file-upload-button {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.ysa-file-upload__icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--ysa-file-upload-icon-bg, #efe5ff);
  color: var(--ysa-file-upload-accent, #7031ef);
}
.ysa-file-upload__icon svg { width: 23px; height: 23px; }
.ysa-file-upload.has-file .ysa-file-upload__icon { background: #dff8f1; color: #007d65; }
.ysa-file-upload__copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 6px; }
.ysa-file-upload__name { font-size: 14px; line-height: 1.5; font-weight: 600; overflow-wrap: anywhere; }
.ysa-file-upload__detail { color: #657591; font-size: 12px; font-weight: 400; line-height: 1.5; }
.ysa-file-upload__button {
  flex: 0 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--ysa-file-upload-line, #e0d2f9);
  border-radius: 9px;
  background: #fff;
  color: var(--ysa-file-upload-accent, #5823b7);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 600px) {
  .ysa-file-upload { gap: 12px; padding: 16px; flex-wrap: wrap; }
  .ysa-file-upload__copy { flex-basis: calc(100% - 56px); }
  .ysa-file-upload__button { margin-left: 56px; }
}