/* ==========================================================================
   SOFTBOOK AI — VIDEO STUDIO
   Loaded after dashboard.css. Video-specific surface only.
   ========================================================================== */

.starter-video::before {
  background:
    radial-gradient(320px 220px at 88% 8%, rgba(70, 194, 255, 0.42), transparent 68%),
    linear-gradient(140deg, rgba(20, 160, 200, 0.42), rgba(20, 20, 32, 0.62));
}

/* Shorts are vertical */
.story-card .story-thumb,
.video-card .story-thumb { aspect-ratio: 9 / 16; }
.skeleton-thumb { aspect-ratio: 9 / 16; }

/* Play affordance on a video thumbnail */
.story-card .position-relative::after {
  content: "\F4F4"; /* bootstrap-icons play-fill */
  font-family: "bootstrap-icons";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.15rem;
  color: #fff;
  background: rgba(8, 8, 14, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.story-card:hover .position-relative::after { opacity: 1; }

/* -----------------------------------------------------------------------------
   MOTION PROMPT — two lines by default

   A script from the assistant runs to six headed lines, which pushed the
   settings rows, the share controls and both buttons below the fold. The
   modal opened on a wall of text with nothing actionable in view.

   -webkit-line-clamp is the only cross-browser way to clamp by LINES rather
   than by height, and it still needs the -webkit- prefixed display and
   box-orient even in browsers that have supported it for years. Firefox and
   Safari both honour it.
----------------------------------------------------------------------------- */
.vd-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vd-clamp-toggle {
  padding: 0;
  margin: 0 0 8px;
  border: 0;
  background: none;
  font-size: .76rem;
  font-weight: 600;
  color: var(--sb-violet);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vd-clamp-toggle:hover { text-decoration: underline; }

/* The generated scripts are newline-separated headings, and without this the
   clamp measures one long wrapped paragraph instead of the real lines. */
#vdPrompt, #vdEnhanced { white-space: pre-wrap; }