/* Lightweight surfaces shared by the app and embedded studio. */
.upload-surface,
.kb-upload-surface.ant-upload-wrapper .ant-upload-drag {
  box-sizing: border-box;
  border: 1px solid transparent;
  background: linear-gradient(105deg, #e0f3ff 0%, #cceaff 42%, #f6eafa 100%) padding-box,
    linear-gradient(105deg, #3288ff, #a651ff) border-box;
  color: #1677ff;
  box-shadow: 0 3px 8px #3b82f618;
  transition: box-shadow 160ms ease;
}
.upload-surface:hover, .upload-surface[data-active="true"], .kb-upload-surface .ant-upload-drag:hover { box-shadow: 0 4px 12px #3b82f62b; }
.upload-surface:focus-visible { outline: 2px solid #3288ff; outline-offset: 3px; }
.ui-skeleton { position: relative; overflow: hidden; border-radius: 8px; background: #eaf0f7; }
.ui-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff9c, transparent); transform: translateX(-100%); animation: skeleton-sweep 1.8s ease-in-out infinite; }
@keyframes skeleton-sweep { to { transform: translateX(100%); } }
.page-skeleton { width: 100%; box-sizing: border-box; padding: 24px; }
.page-skeleton-heading { height: 22px; width: 26%; margin-bottom: 28px; }
.page-skeleton-steps { display: flex; justify-content: space-between; gap: 20px; margin: 8px 0 28px; }
.page-skeleton-steps > span { height: 28px; flex: 1; }
.page-skeleton-panel { padding: 28px; border-radius: 18px; background: #fff; min-height: 280px; box-sizing: border-box; }
.page-skeleton-line { height: 14px; margin-bottom: 20px; width: 80%; }
.page-skeleton-line:nth-child(2) { width: 55%; }
.page-skeleton-line:nth-child(3) { width: 90%; }
.page-skeleton-block { height: 140px; margin-top: 28px; }
.chart-skeleton { height: 260px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .ui-skeleton::after { animation: none; } .upload-surface { transition: none; } }

.kb-upload-surface.ant-upload-wrapper .ant-upload-drag { border-radius: 16px; border-style: solid; text-align: left; }
.kb-upload-surface.ant-upload-wrapper .ant-upload-drag .ant-upload-btn { display: block; width: 100%; min-height: 148px; box-sizing: border-box; padding: 24px; text-align: left; }
.kb-upload-surface.ant-upload-wrapper .ant-upload-drag .ant-upload-drag-container { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; }
.kb-upload-surface.ant-upload-wrapper .ant-upload-drag p { margin: 0; }
.kb-upload-surface.ant-upload-wrapper .ant-upload-drag:has(:focus-visible) { outline: 2px solid #3288ff; outline-offset: 3px; }