/* ================================================================
   chatbox_video_generator.css  v2
   Modal "Genera Video Custom" — PNPB Music Creator
   Prefisso classi: cvg-
   ================================================================ */

#cvg-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
}

.cvg-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.80); cursor: pointer;
}

/* ── Box ────────────────────────────────────────────────────────── */
.cvg-box {
  position: relative; z-index: 1;
  background: #12122a; border: 1px solid #2e2e50; border-radius: 16px;
  width: min(860px, 96vw); max-height: 92vh;
  overflow-y: auto; padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
  color: #dde0f0;
  scrollbar-width: thin; scrollbar-color: #333 transparent;
}
.cvg-box::-webkit-scrollbar { width: 6px; }
.cvg-box::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

/* ── Header ─────────────────────────────────────────────────────── */
.cvg-header {
  font-size: 17px; font-weight: 700; text-align: center;
  color: #f5c542; padding-bottom: 7px;
  border-bottom: 1px solid #2e2e50; letter-spacing: 0.04em;
}

/* ── Preset selector ────────────────────────────────────────────── */
.cvg-presets {
  display: flex; gap: 10px;
}

.cvg-preset-btn {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: #0f0f22; border: 1.5px solid #2e2e50;
  border-radius: 10px; padding: 7px 12px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.cvg-preset-btn:hover { background: #1a1a38; border-color: #555; }
.cvg-preset-btn.cvg-preset-active { border-color: #f5c542; background: #1b1700; }

.cvg-picon { font-size: 22px; flex-shrink: 0; }

.cvg-pinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cvg-pname {
  font-size: 13px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cvg-pdesc { font-size: 10px; color: #777; line-height: 1.3; }

/* ── Orientation toggle (sotto preview) ──────────────────────────── */
.cvg-orient-bar {
  display: flex; flex-direction: column; gap: 5px; width: 100%;
}

.cvg-orient-btn {
  width: 80%;
  background: #0f0f22; border: 1.5px solid #2e2e50;
  border-radius: 7px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; color: #888;
  cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cvg-orient-btn:hover { border-color: #555; color: #ccc; }
.cvg-orient-btn.cvg-orient-active { border-color: #f5c542; color: #f5c542; background: #1b1700; }

.cvg-btn-preview {
  width: 80%; display: block; margin: 0 auto;
  background: #0f0f22; border: 1.5px solid #1e3a4a;
  border-radius: 7px; padding: 5px 14px;
  font-size: 12px; font-weight: 600; color: #4a9bb8;
  cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
}
.cvg-btn-preview small { font-weight: 400; opacity: 0.75; font-size: 10px; }
.cvg-btn-preview:hover { border-color: #4af; color: #4af; background: #001a2e; }
.cvg-btn-preview:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Main layout ─────────────────────────────────────────────────── */
.cvg-main {
  display: flex; gap: 20px; align-items: flex-start;
}

/* ── Preview panel ───────────────────────────────────────────────── */
.cvg-preview-panel {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; flex-shrink: 0; width: 165px;
}

.cvg-panel-label {
  font-size: 10px; font-weight: 700; color: #f5c542;
  text-transform: uppercase; letter-spacing: 0.1em;
}

/* ── Preview frame ───────────────────────────────────────────────── */
.cvg-preview-frame {
  position: relative; overflow: hidden;
  border-radius: 10px; border: 1px solid #2e2e50;
  background: #080818;
}
.cvg-pf-v { width: 120px; height: 213px; } /* 9:16 */
.cvg-pf-h { width: 155px; height:  87px; } /* 16:9 */

/* blurred background layer */
.cvg-prev-bg {
  position: absolute; inset: -10%;
  background-size: cover; background-position: center;
  background-color: #1a1a2e;
}

/* cover: centered in frame */
.cvg-prev-cover-wrap {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}

.cvg-prev-cover {
  width: 66px; height: 66px;
  background: #2e2e50; border-radius: 6px;
  background-size: cover; background-position: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.55);
}
.cvg-pf-h .cvg-prev-cover { width: 52px; height: 52px; }

.cvg-prev-circle { border-radius: 50%; }

/* waveform bars */
.cvg-prev-wave {
  position: absolute; bottom: 24px; left: 0; right: 0;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 1.5px; height: 22px; z-index: 2;
}
.cvg-prev-wave span {
  display: inline-block;
  width: 3px; height: 100%;
  border-radius: 2px; transform-origin: bottom;
  animation: cvg-wave-bar 1.2s ease-in-out infinite;
}
.cvg-pw-colored span { background: linear-gradient(to top, #f5c542, #ff6b6b, #4af); }
.cvg-pw-stereo  span { background: #4af; opacity: 0.8; }

/* circular waveform: radial bars around cover */
.cvg-cw-svg {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; width: 100%; height: 100%;
}
.cvg-cw-bar {
  animation: cvg-cw-pulse 1.1s ease-in-out infinite alternate;
}
@keyframes cvg-cw-pulse {
  0%   { opacity: 0.12; }
  100% { opacity: 1; }
}

/* title overlay */
.cvg-prev-title {
  position: absolute; bottom: 6px; left: 4px; right: 4px;
  font-size: 7px; font-weight: 700; color: #fff;
  text-align: center; z-index: 3;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cvg-preview-note {
  font-size: 9px; color: #444; text-align: center; line-height: 1.4;
  max-width: 140px;
}

/* ── Settings panel ──────────────────────────────────────────────── */
.cvg-settings-panel {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}

.cvg-field { display: flex; flex-direction: column; gap: 5px; }

.cvg-field > label {
  font-size: 11px; font-weight: 600; color: #9090b8;
}

.cvg-field input[type="text"],
.cvg-field textarea,
.cvg-field input[type="file"] {
  width: 100%; box-sizing: border-box;
  background: #0a0a1e; border: 1px solid #30305a;
  border-radius: 6px; color: #dde0f0;
  padding: 6px 10px; font-size: 12px;
  outline: none; transition: border-color 0.15s;
}
.cvg-field input[type="text"]:focus,
.cvg-field textarea:focus { border-color: #f5c542; }

.cvg-field textarea {
  resize: vertical; font-family: inherit;
  line-height: 1.5; min-height: 70px;
}

.cvg-field input[type="file"] {
  padding: 5px; font-size: 11px;
  color: #9090b8; cursor: pointer;
}

.cvg-opt { color: #4a4a70; font-size: 10px; font-weight: 400; }

/* ── Size radio buttons ──────────────────────────────────────────── */
.cvg-size-opts {
  display: flex; gap: 8px;
}

.cvg-size-opt {
  flex: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer;
  background: #0f0f22; border: 1.5px solid #2e2e50;
  border-radius: 8px; padding: 6px 10px;
  font-size: 13px; font-weight: 700; color: #888;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  user-select: none;
}
.cvg-size-opt:hover { border-color: #555; color: #ccc; }
.cvg-size-opt.cvg-size-checked { border-color: #f5c542; color: #f5c542; background: #1b1700; }

/* preview 1MB option */
.cvg-size-opt-prev { border-color: #1e3a4a; color: #4a9bb8; }
.cvg-size-opt-prev small { font-size: 9px; font-weight: 400; opacity: 0.8; display: block; }
.cvg-size-opt-prev:hover { border-color: #2a5a70; color: #6abbd8; }
.cvg-size-opt-prev.cvg-size-checked { border-color: #4af; color: #4af; background: #001a2e; }

.cvg-size-opt input[type="radio"] { display: none; }

/* download link in status */
.cvg-dl-link {
  color: #f5c542; text-decoration: none; font-weight: 700;
  border: 1px solid #f5c542; border-radius: 4px;
  padding: 1px 7px; font-size: 11px;
}
.cvg-dl-link:hover { background: #f5c542; color: #111; }

/* ── Status ──────────────────────────────────────────────────────── */
.cvg-status {
  font-size: 12px; text-align: center; min-height: 20px;
  color: #86efac; font-weight: 500;
}
.cvg-status.cvg-err { color: #fca5a5; }

/* ── Footer ──────────────────────────────────────────────────────── */
.cvg-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding-top: 7px; border-top: 1px solid #2e2e50;
}

.cvg-btn-generate {
  background: #f5c542; color: #111; border: none;
  border-radius: 8px; padding: 8px 26px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background 0.18s, transform 0.1s;
}
.cvg-btn-generate:hover  { background: #ffd966; }
.cvg-btn-generate:active { transform: scale(0.97); }
.cvg-btn-generate:disabled { background: #555; color: #888; cursor: not-allowed; }

.cvg-btn-cancel {
  background: #1e1e38; color: #dde0f0;
  border: 1px solid #30305a; border-radius: 8px;
  padding: 8px 18px; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: border-color 0.18s;
}
.cvg-btn-cancel:hover { border-color: #f5c542; color: #f5c542; }

/* ── Animations ──────────────────────────────────────────────────── */

/* waveform bars */
@keyframes cvg-wave-bar {
  0%, 100% { transform: scaleY(0.2); }
  50%      { transform: scaleY(1); }
}


/* cover: spin */
@keyframes cvg-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.cvg-anim-spin { animation: cvg-spin 8s linear infinite; }

/* cover: zoom */
@keyframes cvg-zoom {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
.cvg-anim-zoom { animation: cvg-zoom 3s ease-in-out infinite; }

/* cover: vibrate */
@keyframes cvg-shake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2px,-1px) rotate(-1deg); }
  75%      { transform: translate(2px, 1px) rotate(1deg); }
}
.cvg-anim-shake { animation: cvg-shake 0.45s ease-in-out infinite; }

/* cover: parallax drift */
@keyframes cvg-drift {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(-4px, 2px); }
  66%      { transform: translate(4px,-2px); }
}
.cvg-anim-drift { animation: cvg-drift 5s ease-in-out infinite; }

/* title: glow */
@keyframes cvg-glow {
  0%, 100% { text-shadow: 0 0 3px #f5c542; color: #f5c542; }
  50%      { text-shadow: 0 0 10px #f5c542, 0 0 20px rgba(245,197,66,0.5); color: #fff; }
}
.cvg-anim-glow { animation: cvg-glow 2s ease-in-out infinite; }

/* title: slide */
@keyframes cvg-slide-title {
  0%        { transform: translateY(10px); opacity: 0; }
  15%, 85%  { transform: translateY(0);   opacity: 1; }
  100%      { transform: translateY(-10px);opacity: 0; }
}
.cvg-anim-slide-title { animation: cvg-slide-title 4s ease-in-out infinite; }

/* title: pulse */
@keyframes cvg-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.cvg-anim-pulse { animation: cvg-pulse 1.5s ease-in-out infinite; }

/* title: fade */
@keyframes cvg-fade-title {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
.cvg-anim-fade-title { animation: cvg-fade-title 3s ease-in-out infinite; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .cvg-presets { flex-direction: column; }
  .cvg-main    { flex-direction: column; align-items: center; }
  .cvg-preview-panel { width: 100%; flex-direction: row; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
  .cvg-box     { padding: 14px; }
  .cvg-pf-v    { width: 100px; height: 178px; }
}