/* AdStudio. Käyttää style.css:n muuttujia (--bg, --accent, ...) */

.as-top {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.as-top .brand { font-weight: 800; font-size: 19px; color: var(--text); text-decoration: none; }
.as-top-name {
  font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent); border: 1px solid rgba(181,123,255,.35);
  padding: 3px 9px; border-radius: 999px;
}
.as-top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.as-credits { font-size: 13px; color: var(--muted); }
.as-lang {
  background: var(--bg2); color: var(--text); border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; padding: 6px 8px; font-size: 13px;
}

.as-wrap { max-width: 1120px; margin: 0 auto; padding: 34px 20px 90px; }
.as-step { animation: asIn .35s ease both; }
@keyframes asIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.as-h1 { font-size: clamp(26px, 4vw, 40px); line-height: 1.15; margin: 0 0 10px; }
.as-h2 { font-size: clamp(20px, 3vw, 27px); margin: 0 0 6px; }
.as-lead { color: var(--muted); max-width: 60ch; line-height: 1.55; margin: 0 0 26px; }

.as-field { display: block; margin-bottom: 20px; }
.as-field > span { display: block; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.as-field textarea {
  width: 100%; background: var(--bg2); color: var(--text);
  border: 1px solid rgba(255,255,255,.14); border-radius: 13px;
  padding: 14px 15px; font: inherit; line-height: 1.5; resize: vertical;
}
.as-field textarea:focus { outline: none; border-color: var(--accent); }

.as-opts { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 14px; }
.as-opt-label { display: block; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.as-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.as-chip {
  background: var(--bg2); color: var(--text); border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px; padding: 7px 14px; font-size: 14px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.as-chip:hover { border-color: rgba(181,123,255,.5); }
.as-chip[aria-pressed="true"] { border-color: var(--accent); background: rgba(181,123,255,.14); }

.as-opt-wide { flex: 1 1 100%; }
.as-chips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.as-chip-big {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  text-align: start; padding: 11px 14px; border-radius: 12px; line-height: 1.35;
}
.as-chip-t { font-weight: 700; font-size: 14px; }
.as-chip-h { font-size: 12px; color: var(--muted); }
.as-chip-big[aria-pressed="true"] .as-chip-h { color: #cbb6ff; }

.as-cost { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.as-cost b { color: var(--text); }
/* Ilmainen suunnitteluvaihe sanotaan ääneen: asiakas näkee koko
   kuvakäsikirjoituksen ennen kuin mitään veloitetaan. */
.as-freeline {
  margin: 6px 0 0; font-size: 13px; color: #9be6b4;
}
.as-back { text-decoration: none; white-space: nowrap; }

.as-more {
  margin: 18px 0 24px; padding: 16px 18px 18px;
  background: var(--bg2); border: 1px solid rgba(255,255,255,.08); border-radius: 14px;
}
.as-more-h { margin: 0; font-size: 15px; font-weight: 700; }
.as-more-hint { margin: 5px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.as-optional { font-style: normal; opacity: .65; }
.as-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.as-more-grid label { display: block; }
.as-more-grid label > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.as-more-grid input {
  width: 100%; background: var(--bg2); color: var(--text);
  border: 1px solid rgba(255,255,255,.13); border-radius: 10px; padding: 10px 12px; font: inherit;
}

.as-go { min-width: 260px; }
.as-status { margin-top: 12px; font-size: 14px; color: var(--muted); min-height: 20px; }
.as-status.err { color: #ff8a8a; }

/* --- kuvakäsikirjoitus --- */
.as-plan-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.as-plan-head > div { flex: 1; }
.as-angle { color: var(--text); opacity: .85; margin: 0 0 6px; line-height: 1.5; }
.as-understood { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.5; }

.as-warn, .as-refuse {
  border-radius: 12px; padding: 13px 15px; margin-bottom: 18px; font-size: 14px; line-height: 1.55;
}
.as-warn { background: rgba(181,123,255,.10); border: 1px solid rgba(181,123,255,.3); }
.as-warn ul { margin: 6px 0 0; padding-left: 20px; }
/* Agentin kysymykset ovat vastattavia, eivät pelkkää tekstiä. */
.as-q-hint { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
.as-qlist { display: grid; gap: 12px; }
.as-q { display: block; }
.as-q > span { display: block; margin-bottom: 5px; }
.as-q input {
  width: 100%; background: var(--bg2); color: var(--text);
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  padding: 9px 11px; font: inherit;
}
.as-q input:focus { outline: none; border-color: var(--accent); }
.as-q-go { margin-top: 13px; }

/* Otoksen spiikki. Kestoarvio näkyy heti kirjoitettaessa, jotta käyttäjä
   tietää mahtuuko lause ENNEN kuin mitään generoidaan. */
.as-vo {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed rgba(255,255,255,.12);
}
.as-vo-h {
  display: block; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.as-vo-in {
  width: 100%; background: var(--bg2); color: var(--text);
  border: 1px solid rgba(255,255,255,.14); border-radius: 9px;
  padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.45; resize: vertical;
}
.as-vo-in:focus { outline: none; border-color: var(--accent); }
.as-vo-note { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); min-height: 1em; }
.as-vo-note.ok { color: #9be6b4; }
.as-vo-note.over { color: #ffb9a0; }
.as-vo-go { margin-top: 8px; }
.as-vo-go[disabled] { opacity: .45; cursor: default; }
.as-vo-prev { display: block; width: 100%; height: 32px; margin-top: 9px; }
.as-refuse { background: rgba(255,90,90,.10); border: 1px solid rgba(255,90,90,.35); color: #ffbcbc; }

.as-board {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px; margin-bottom: 24px;
}
.as-shot {
  background: var(--bg2); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
}
.as-frame {
  position: relative; aspect-ratio: 9 / 16; background: #0d0b12;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.as-frame img,
.as-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-frame-empty { color: var(--muted); font-size: 13px; text-align: center; padding: 0 14px; line-height: 1.5; }
.as-ost {
  position: absolute; left: 8%; right: 8%; bottom: 11%;
  font-weight: 800; font-size: 15px; line-height: 1.25; text-align: center;
  color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 0 30px rgba(0,0,0,.6);
  pointer-events: none;
}
.as-shot-n {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  background: rgba(0,0,0,.6); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 6px; padding: 2px 7px;
}
.as-shot-secs {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(0,0,0,.6); color: #cbb6ff; font-size: 11px; font-weight: 700;
  border-radius: 6px; padding: 2px 7px;
}
.as-shot-body { padding: 11px 12px 13px; display: flex; flex-direction: column; gap: 8px; }
.as-shot-body textarea {
  width: 100%; background: #17141f; color: var(--text);
  border: 1px solid rgba(255,255,255,.10); border-radius: 8px;
  padding: 7px 9px; font: inherit; font-size: 13px; line-height: 1.4; resize: vertical;
}
.as-shot-body textarea:focus { outline: none; border-color: var(--accent); }
.as-why { font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0; }
.as-shot-btn { align-self: flex-start; }
.as-shot.busy .as-frame::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(181,123,255,.22) 50%, transparent 80%);
  animation: asShimmer 1.15s linear infinite;
}
@keyframes asShimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.as-meta { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 22px; font-size: 14px; }
.as-meta span { color: var(--muted); margin-right: 8px; }
.as-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.as-hint { color: var(--muted); font-size: 13px; }

/* --- valmis --- */
.as-done { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; margin: 18px 0 22px; }
.as-outvid {
  width: 300px; max-width: 100%; aspect-ratio: 9/16; border-radius: 16px;
  background: #000; box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
/* vaaka- ja neliömuodossa 300 px olisi turhan pieni katsottavaksi */
.as-outvid[style*="1920 / 1080"] { width: 560px; }
.as-outvid[style*="1080 / 1080"] { width: 420px; }
.as-done-side { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 14px; }
.as-cap { background: var(--bg2); border: 1px solid rgba(255,255,255,.09); border-radius: 13px; padding: 14px 15px; }
.as-cap-h { display: block; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.as-cap p { margin: 0 0 8px; line-height: 1.5; }
.as-tags { color: #b9a4ff; font-size: 14px; word-break: break-word; }
.as-tip { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.as-tiktok { background: #fe2c55; border-color: #fe2c55; }
.as-tiktok:hover { filter: brightness(1.08); }
.as-tiktok-note { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.as-again { margin-top: 8px; }

[dir="rtl"] .as-ost { direction: rtl; }

@media (max-width: 640px) {
  .as-wrap { padding: 22px 14px 70px; }
  .as-board { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .as-chips-grid { grid-template-columns: 1fr; }
  .as-outvid { width: 100%; max-width: 320px; }
  .as-go { width: 100%; }
}

/* Vaakamainoksen otoskortti tarvitsee enemmän leveyttä kuin pystymainoksen. */
.as-board--wide { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.as-board--square { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Klippi käynnistyy hiiren alla, joten pysäytettynä se saa hillityn vihjeen. */
.as-frame video { cursor: pointer; }
.as-frame:hover video { filter: none; }
.as-cost-sub { color: var(--muted); font-size: 12px; }
/* Agentin ehdotus repliikiksi. Ei esitäytetä kenttää: mainos on äänetön
   kunnes käyttäjä itse valitsee äänen. */
.as-vo-use {
  margin-top: 6px; background: none; border: 0; padding: 0;
  color: var(--accent); font: inherit; font-size: 12px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.as-vo-use:hover { color: #cbb6ff; }
/* Ääni vaihdettavissa: puhesynteesi ääntää välillä väärin ja uusiksi
   yrittäminen on ilmaista, joten valinta kannattaa tarjota. */
.as-vo-picks { display: flex; gap: 6px; margin-top: 8px; }
.as-vo-pick {
  flex: 1; background: var(--bg2); color: var(--muted);
  border: 1px solid rgba(255,255,255,.13); border-radius: 999px;
  padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer;
}
.as-vo-pick[aria-pressed="true"] {
  border-color: var(--accent); background: rgba(181,123,255,.14); color: var(--text);
}