/* First-paint placeholder for the video tool composers. */
.chatbot.composer-pending {
  pointer-events: none !important;
}

.chatbot.composer-pending > :not(.composer-loading-skeleton) {
  visibility: hidden !important;
}

.composer-loading-skeleton {
  display: none;
}

.chatbot.composer-pending .composer-loading-skeleton {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 17px 19px 15px;
  pointer-events: none;
  box-sizing: border-box;
}

.video-composer-skeleton-topline,
.video-composer-skeleton-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.video-composer-skeleton-block {
  display: block;
  flex: 0 0 auto;
  border-radius: 6px;
  background: #e9edf2;
  animation: video-composer-skeleton-pulse 1.25s ease-in-out infinite alternate;
}

.video-composer-skeleton-title { width: min(34%, 292px); height: 14px; }
.video-composer-skeleton-chip { width: 64px; height: 28px; border-radius: 9px; }
.video-composer-skeleton-chip-wide { width: 116px; height: 28px; border-radius: 9px; }
.video-composer-skeleton-input { width: min(52%, 456px); height: 13px; margin-top: 2px; }
.video-composer-skeleton-icon,
.video-composer-skeleton-send { width: 34px; height: 34px; border-radius: 10px; }
.video-composer-skeleton-model { width: 118px; height: 13px; }
.video-composer-skeleton-credit { width: 48px; height: 12px; margin-left: auto; }

.video-composer-skeleton-actions {
  min-height: 34px;
  margin-top: auto;
}

@keyframes video-composer-skeleton-pulse {
  from { background-color: #f0f3f6; }
  to { background-color: #e2e7ed; }
}

@media (max-width: 768px) {
  .chatbot.composer-pending .composer-loading-skeleton {
    gap: 13px;
    padding: 14px;
  }

  .video-composer-skeleton-title { width: 45%; }
  .video-composer-skeleton-chip { width: 46px; }
  .video-composer-skeleton-chip-wide { display: none; }
  .video-composer-skeleton-input { width: 66%; }
  .video-composer-skeleton-model { width: 88px; }
}