/* ---- Follow a video ------------------------------------------------------------
   A video kept as it is, with a photo of who and/or a picture of where. The home
   panel reuses the Multicam panel's look (.multicam-panel, .multicam-drop); the
   workspace reuses the recut's card and the film strip. Only what is particular
   to it — three drops, up to three frames on one stage, sections — is styled here. */

/* SIX TABS ON A PHONE. With their icons the six need ~460px, and a 375px phone
   has 335 — the row pushed the whole page sideways (five already overflowed a
   little). Labels alone fit; on the very narrowest phones the ROW scrolls,
   never the page. */
@media (max-width: 520px) {
  .mode-tabs { overflow-x: auto; scrollbar-width: none; }
  .mode-tabs::-webkit-scrollbar { display: none; }
  .mode-tabs .icon { display: none; }
  .mode-tabs button { flex: 0 0 auto; padding: 7px 10px; }
}

/* Three drops side by side: the video to follow, who, where. */
.animate-drops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.animate-drop-wrap { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.animate-drop { position: relative; min-height: 150px; overflow: hidden; width: 100%; }
.animate-clear { align-self: center; font-size: .78rem; }
.animate-start { justify-self: start; }
.animate-start:disabled { opacity: .5; cursor: not-allowed; }
.animate-drop.is-set { border-style: solid; background: rgba(201, 182, 255, .06); }
/* Where, when a video sings: its own video shows the place, so nothing to drop. */
.animate-drop.is-quiet { cursor: default; opacity: .55; border-style: dotted; }
/* Follow a video, or sing a song: two things this tab makes, chosen here. */
.animate-modes { display: flex; gap: 5px; }
.animate-modes button { font-size: 11px; color: #8c90a7; background: none; padding: 7px 13px; border-radius: 7px; }
.animate-modes button[aria-selected="true"] { background: #d1c1fd13; color: #dacafa; }
.animate-drop img { width: 100%; max-height: 120px; object-fit: contain; border-radius: 10px; }
.animate-drop strong { max-width: 100%; overflow-wrap: anywhere; }
.animate-terms { margin: 0; font-size: .82rem; color: var(--muted, #9b9bab); }
@media (max-width: 520px) {
  .animate-drops { grid-template-columns: 1fr; }
  .animate-drop { min-height: 110px; padding: 22px 16px; }
}

/* ONE STAGE, TWO INPUTS. The stage takes the VIDEO's shape (that is the shape
   of the finished take), so a wide stage sets them side by side and a tall one
   stacks them — never two slivers. */
.animate-pair { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: 12px; padding: 44px 16px 40px; }
.animate-pair.is-tall { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); }
.animate-pair.is-tall .animate-arrow { transform: rotate(90deg); }
/* Who AND where: two pictures, then the video. Tall, the pictures share a row. */
.animate-pair.has-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1.3fr); }
.animate-pair.is-tall.has-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto minmax(0, 1.4fr); }
.animate-pair.is-tall.has-three .animate-arrow,
.animate-pair.is-tall.has-three > figure:last-of-type { grid-column: 1 / -1; }
.animate-input { margin: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; gap: 8px; }
.animate-frame { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .28); border: 1px solid var(--line, #ffffff0e); }
.animate-frame img, .animate-frame video { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.animate-input figcaption { font-size: .74rem; color: var(--muted, #9b9bab); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.animate-arrow { font-size: 1.4rem; color: var(--lilac, #c9b6ff); line-height: 1; justify-self: center; }
.animate-pair.is-working .animate-frame { animation: animate-breathe 2.4s ease-in-out infinite; }
@keyframes animate-breathe { 50% { border-color: rgba(201, 182, 255, .45); } }
@media (prefers-reduced-motion: reduce) { .animate-pair.is-working .animate-frame { animation: none; } }
.animate-working { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: calc(100% - 32px);
  padding: 5px 12px; border-radius: 999px; background: rgba(16, 18, 27, .78); font-size: .76rem; color: var(--ink, #f4f2fa);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* TAKES, newest first, in the film strip. The kept one is marked. */
.animate-take .film-scene-visual > video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.animate-take.is-chosen .film-scene-visual { border-color: #c9ade99c; box-shadow: 0 0 0 2px #c9ade90d; }
.animate-take.is-selected .film-scene-visual { outline: 2px solid rgba(201, 182, 255, .55); outline-offset: 2px; }
.animate-take-add .film-scene-concept { font-size: 1.3rem; color: var(--lilac, #c9b6ff); }
/* A section not yet made is a placeholder, not a button that does nothing. */
.animate-take:disabled { cursor: default; }
.animate-take:disabled .film-scene-visual { opacity: .7; }
.animate-take.is-failed .film-scene-visual { border-color: rgba(255, 140, 140, .5); }

/* The card: the stretch of video being copied, and what Kynd will tell H3. */
.animate-stretch { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 10px 0; }
.animate-stretch label { display: flex; flex-direction: column; gap: 4px; font-size: .74rem; color: var(--muted, #9b9bab); }
.animate-stretch input { width: 92px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line, #ffffff0e);
  background: var(--raised, #1e2230); color: var(--ink, #f4f2fa); font: inherit; font-size: .86rem; }
.animate-stretch small { flex-basis: 100%; font-size: .74rem; color: var(--subtle, #75798e); }
.animate-direction { margin: 8px 0; font-size: .82rem; }
.animate-direction summary { cursor: pointer; color: var(--muted, #9b9bab); }
.animate-direction p { margin: 8px 0 0; white-space: pre-wrap; color: var(--ink, #f4f2fa); opacity: .88; line-height: 1.45; }