/* "Add New Post" (animated-videos MP-08; frozen approved-designs-add-new-post/add-new-post-flow.dc.html). Theme tokens
   only (Rule 10); sizes as the frozen window draws them. */

.anp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998; /* under the shared "From Video Studio" window (9999), which opens over it */
  background: var(--color-overlay-strong);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 16px;
  overflow: auto;
}

.anp-window {
  width: 100%;
  max-width: 640px;
  background: var(--color-window);
  -webkit-backdrop-filter: blur(40px); /* as every other window: readable in light mode (shared-drawn-scenes MP-10) */
  backdrop-filter: blur(40px);
  border: 1px solid var(--color-border-light);
  border-radius: calc(var(--radius-xl) + var(--space-xs) / 2); /* frozen */
  display: flex;
  flex-direction: column;
  color: var(--color-text-primary);
}

.anp-small-window { max-width: 440px; margin-top: 80px; }

.anp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 22px; /* frozen */
  border-bottom: 1px solid var(--color-border-light);
}

.anp-title { font-size: var(--font-lg); font-weight: 700; }
.anp-title-small { font-size: calc(var(--font-lg) - var(--space-xs) / 4); font-weight: 700; }
.anp-x { background: none; border: 0; color: var(--color-text-primary); font-size: var(--font-lg); cursor: pointer; }

.anp-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.anp-pad { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.anp-group { display: flex; flex-direction: column; gap: 8px; }
.anp-label { font-size: var(--font-xs); font-weight: 600; }

.anp-size,
.anp-day {
  border: 1px solid var(--color-border-medium);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  cursor: pointer;
}
.anp-size.on,
.anp-day.on {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.anp-sizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.anp-size { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); text-align: left; }
.anp-size-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.anp-size-icon span { border: 1.5px solid var(--color-text-tertiary); border-radius: calc(var(--radius-sm) / 2); }
.anp-size.on .anp-size-icon span { border-color: var(--color-primary-pale); }
.anp-size-words { display: flex; flex-direction: column; gap: 2px; }
.anp-size-label { font-size: var(--font-xs); font-weight: 600; }
.anp-size-dims { font-size: calc(var(--font-xs) - var(--space-xs) / 4); color: var(--color-text-tertiary); }

.anp-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.anp-date {
  padding: 9px 10px;
  border-radius: calc(var(--radius-md) - var(--space-xs) / 4);
  border: 1px solid var(--color-border-medium);
  background: var(--color-bg-tertiary);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: calc(var(--font-sm) - var(--space-xs) / 4);
}
.anp-days { display: flex; gap: 4px; flex-wrap: wrap; }
.anp-day { width: 34px; height: 34px; border-radius: calc(var(--radius-md) - var(--space-xs) / 4); font-size: calc(var(--font-xs) - var(--space-xs) / 4); }

.anp-choose {
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-text-primary);
  font-size: calc(var(--font-sm) - var(--space-xs) / 4);
  cursor: pointer;
}
.anp-video {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-medium);
  background: var(--color-bg-tertiary);
}
.anp-video-still {
  width: 64px;
  height: 40px;
  border-radius: calc(var(--radius-sm) + var(--space-xs) / 4);
  background: var(--color-border-medium) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anp-video-still span { width: 0; height: 0; border-left: 9px solid var(--color-white); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.anp-video-words { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.anp-video-name { font-size: calc(var(--font-sm) - var(--space-xs) / 4); font-weight: 600; }
.anp-video-meta { font-size: calc(var(--font-xs) - var(--space-xs) / 4); color: var(--color-text-tertiary); }

.anp-error { font-size: calc(var(--font-sm) - var(--space-xs) / 4); color: var(--color-error); }

.anp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-top: 1px solid var(--color-border-light);
}
.anp-cost { font-size: var(--font-xs); color: var(--color-text-secondary); }
.anp-cost strong { color: var(--color-text-primary); }
.anp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.anp-ghost {
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-primary);
  font-size: calc(var(--font-sm) - var(--space-xs) / 4);
  cursor: pointer;
}
.anp-small { padding: 7px 12px; font-size: var(--font-xs); }
.anp-primary {
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 0;
  background: var(--gradient-primary);
  color: var(--color-white);
  font-size: calc(var(--font-sm) - var(--space-xs) / 4);
  font-weight: 600;
  cursor: pointer;
}
.anp-primary:disabled { opacity: .4; cursor: not-allowed; }

.anp-meta { font-size: var(--font-xs); color: var(--color-text-secondary); }
.anp-steps { display: flex; flex-direction: column; gap: 10px; }
.anp-step { display: flex; align-items: center; gap: 10px; font-size: calc(var(--font-sm) - var(--space-xs) / 4); }
.anp-step-icon { width: 18px; text-align: center; color: var(--color-success); }
.anp-wait { display: flex; align-items: center; gap: 10px; font-size: var(--font-xs); color: var(--color-text-tertiary); }
.anp-spinner {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary-light);
  border-top-color: var(--color-primary);
  animation: anp-spin .8s linear infinite;
}
@keyframes anp-spin { to { transform: rotate(360deg); } }
.anp-failed {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--color-error-light);
  border: 1px solid var(--color-error);
  font-size: calc(var(--font-sm) - var(--space-xs) / 4);
  line-height: 1.45;
}
.anp-reason { color: var(--color-text-tertiary); }

/* "Video added: …" under Select Template in the Post Editor (frozen state 4) */
.anp-video-added {
  padding: 9px 10px;
  border-radius: calc(var(--radius-md) - var(--space-xs) / 4);
  border: 1px solid var(--color-success);
  background: var(--color-success-light);
  font-size: var(--font-xs);
  margin-top: 8px;
}
.anp-size-line { font-size: calc(var(--font-xs) - var(--space-xs) / 4); color: var(--color-text-tertiary); margin-top: 8px; }

/* Frozen 2026-10-18 (Add New Post Flow.dc.html): the round "+" beside "Regenerate All" opens Add New Post */
.anp-plus {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-text-primary);
  font-size: var(--font-xl); /* frozen: 20px */
  line-height: 1;
  cursor: pointer;
}
/* "Regenerate All" and the round "+" side by side */
.anp-plus-row { display: flex; align-items: center; gap: var(--space-sm); }
/* The line in place of the 3 choices */
.anp-line {
  font-size: calc(var(--font-sm) - var(--space-xs) / 4);
  color: var(--color-text-secondary);
  line-height: 1.45;
}