/*
 * Write a voiceover — the styles for this add-on, and nothing else's.
 *
 * Loaded into the editor document by the add-on loader, AFTER editor.css, so the
 * tokens (--cw-line-13, --cw-ink-65, --cw-bone) are already defined and this reuses
 * them rather than inventing a second palette. Everything is sized for a 300px
 * column, which is why the script box is five rows and not a full-height editor: it
 * is a handful of sentences for a fifteen-second video, not a document.
 *
 * .cw-fail is deliberately NOT here — it is the shape of every refusal in the
 * editor and stayed in editor.css with the rest of the furniture.
 */

/* ── GENERATE A VOICEOVER ──────────────────────────────────────────────────────
   Lives inside the Voiceover block. Everything here is sized for a 300px column,
   which is why the script is five rows rather than a full-height editor: it is a
   handful of sentences for a fifteen-second video, not a document. */
/* The way in. A real button: `.cw-file dashed` is the style for a drop target
   wrapped round a file input, and on a <button> it inherited the browser's default
   face and came out looking unstyled. */
.cw-gen-open {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; box-sizing: border-box; height: 38px; margin-top: 8px;
  border: 1px solid rgba(61,116,255,.4); border-radius: 8px;
  background: linear-gradient(180deg, rgba(61,116,255,.16), rgba(61,116,255,.07));
  color: #BFD2FF; font: 600 12px/1 inherit; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.cw-gen-open:hover {
  border-color: rgba(110,155,255,.8); color: #fff;
  background: linear-gradient(180deg, rgba(61,116,255,.26), rgba(61,116,255,.12));
}
.cw-gen-open svg { flex: none; opacity: .85 }

/* Progress, in the panel. The top-bar pill is for after they have wandered off;
   while this is open the work belongs where they are looking. */
.cw-gen-prog { margin-top: 11px }
.cw-gen-prog-top {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  font-size: 11.5px; color: rgba(242,242,243,.7);
}
.cw-gen-pct {
  margin-left: auto; font-family: var(--cw-mono); font-size: 11px;
  color: var(--cw-ink); font-variant-numeric: tabular-nums;
}
/* Four bars, staggered — the design's own equaliser, reused so a voice being made
   looks like the same family of thing as a video being played. */
.cw-gen-eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; flex: none }
.cw-gen-eq i {
  width: 2px; border-radius: 1px; background: #6E9BFF;
  animation: cw-gen-eq 1s ease-in-out infinite;
}
.cw-gen-eq i:nth-child(1) { height: 5px;  animation-delay: 0s }
.cw-gen-eq i:nth-child(2) { height: 11px; animation-delay: .14s }
.cw-gen-eq i:nth-child(3) { height: 7px;  animation-delay: .28s }
.cw-gen-eq i:nth-child(4) { height: 12px; animation-delay: .42s }
@keyframes cw-gen-eq {
  0%, 100% { transform: scaleY(.45) }
  50%      { transform: scaleY(1) }
}
.cw-gen-prog .cw-bar { height: 6px }

/* The result, in the panel. Green because it worked, and the two answers are the
   only buttons on it — the question is what to do with what they can now hear. */
.cw-gen-done {
  margin-top: 12px; padding: 12px; border-radius: 8px;
  border: 1px solid rgba(80,210,150,.3);
  background: linear-gradient(180deg, rgba(80,210,150,.1), rgba(80,210,150,.04));
}
.cw-gen-done-t {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: #7FE3B4;
}
.cw-gen-done-b {
  margin-top: 6px; font-size: 11.5px; line-height: 1.55; color: rgba(242,242,243,.6);
}
.cw-gen-done-row { display: flex; gap: 7px; margin-top: 11px }
.cw-gen-hear, .cw-gen-use {
  flex: 1; height: 36px; border-radius: 8px; font: 600 12px/1 inherit; cursor: pointer;
}
.cw-gen-hear {
  border: 1px solid rgba(255,255,255,.16); background: rgba(7,12,23,.5);
  color: rgba(242,242,243,.8);
}
.cw-gen-hear:hover { border-color: rgba(255,255,255,.34); color: #fff }
.cw-gen-use {
  border: 0; color: #06210f;
  background: linear-gradient(180deg, #7FE3B4 0%, #4FCB92 100%);
  box-shadow: 0 8px 18px -9px rgba(80,210,150,.8), inset 0 1px 0 rgba(255,255,255,.35);
}
.cw-gen-use:hover { background: #96EAC4 }
.cw-gen-drop {
  width: 100%; margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 11px; color: rgba(242,242,243,.45); text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.2);
}
.cw-gen-drop:hover { color: var(--cw-ink) }
.cw-gen {
  margin-top: 10px; padding: 12px; border-radius: 8px;
  border: 1px solid var(--cw-line-09); background: var(--cw-page);
}
.cw-gen-head { display: flex; align-items: center; margin-bottom: 9px }
.cw-gen-lb {
  font-family: var(--cw-disp-font); font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; color: rgba(242,242,243,.42);
}
.cw-gen-x {
  margin-left: auto; width: 20px; height: 20px; display: grid; place-items: center;
  border: 0; border-radius: 4px; background: none; color: var(--cw-ink-45); cursor: pointer;
}
.cw-gen-x:hover { background: var(--cw-line-07); color: var(--cw-ink) }
.cw-gen-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 84px;
  background: var(--cw-panel); border: 1px solid var(--cw-line-09); border-radius: 6px;
  padding: 10px 11px; color: var(--cw-ink); font: 400 13px/1.55 inherit; outline: none;
}
.cw-gen-text:focus {
  border-color: #3D74FF; box-shadow: 0 0 0 3px rgba(61,116,255,.16);
}
.cw-gen-meta {
  display: flex; justify-content: space-between; gap: 8px; margin-top: 7px;
  font-family: var(--cw-mono); font-size: 10.5px; color: rgba(242,242,243,.4);
}
.cw-gen-row { display: flex; gap: 8px; margin-top: 11px }
.cw-gen-field { flex: 1; min-width: 0; display: block }
.cw-gen-field-sm { flex: 0 0 88px }
.cw-gen-field > span {
  display: block; font-size: 10.5px; color: var(--cw-ink-45); margin-bottom: 4px;
}
.cw-gen-sel {
  width: 100%; box-sizing: border-box; height: 34px;
  background: var(--cw-panel); border: 1px solid var(--cw-line-09); border-radius: 6px;
  color: var(--cw-ink); font-size: 12.5px; padding: 0 8px; outline: none;
  appearance: none; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 49%, rgba(242,242,243,.45) 50%, rgba(242,242,243,.45) 58%, transparent 59%),
    linear-gradient(-45deg, transparent 49%, rgba(242,242,243,.45) 50%, rgba(242,242,243,.45) 58%, transparent 59%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.cw-gen-sel:focus { border-color: rgba(255,255,255,.28) }
.cw-gen-go {
  width: 100%; height: 40px; margin-top: 12px; border: 0; border-radius: 9px;
  background: linear-gradient(180deg, #4A7EFF 0%, #3D74FF 100%); color: #fff;
  font: 600 13px/1 inherit; cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(61,116,255,.85), inset 0 1px 0 rgba(255,255,255,.2);
}
.cw-gen-go:hover { background: #5A8AFF }
.cw-gen-go[disabled] { opacity: .5; cursor: default; box-shadow: none }
.cw-gen-note {
  margin-top: 9px; font-size: 10.5px; line-height: 1.5; color: rgba(242,242,243,.38);
}
.cw-gen .cw-fail { margin-top: 10px }