/* GIF caption editor.
   The preview is the real animated GIF with a transparent <canvas> laid over
   it -- the same canvas that gets posted to the server as the caption layer,
   so what you drag around on screen is literally what gets burned into the
   file. */

.gc-wrap { --gc-blue:#1796E6; }

.gc-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) 320px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px) { .gc-grid { grid-template-columns: 1fr; } }

/* ── stage ───────────────────────────────────────────────────────────── */
.gc-stage {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.gc-frame {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 100%;
  line-height: 0;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15,23,42,.12);
}
.gc-frame img {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 100%;          /* JS shrinks this when a caption bar is added */
  display: block;
}
.gc-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;    /* let pointermove drag a caption, not scroll */
  cursor: default;
}
.gc-frame canvas.gc-dragging { cursor: grabbing; }

/* Empty state doubles as the drop zone. */
.gc-drop {
  border: 2px dashed var(--gc-blue);
  border-radius: 12px;
  background: #f8fafc;
  padding: 42px 18px;
  cursor: pointer;
  line-height: 1.5;
  transition: background .12s ease, border-color .12s ease;
}
.gc-drop.gc-over { background: #e8f4fd; border-color: #0b6fb3; }
.gc-drop h2 { font-size: 1.1rem; margin: 12px 0 4px; font-weight: 700; }
.gc-drop p { color: #64748b; font-size: 14px; margin: 0; }

.gc-status { font-size: 13px; color: #64748b; margin: 10px 0 0; min-height: 1.2em; }
.gc-status--error { color: #c0392b; }
.gc-hint { font-weight: 400; color: #94a3b8; font-size: 11px; }

/* ── controls ────────────────────────────────────────────────────────── */
.gc-controls { display: flex; flex-direction: column; gap: 4px; }
.gc-controls label { font-size: 13px; font-weight: 700; margin-top: 10px; color: #0f172a; }
.gc-controls input[type=text] {
  padding: 9px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px;
  width: 100%;
}
.gc-controls select {
  padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px;
  font-size: 15px; background: #fff; width: 100%;
}
.gc-controls input[type=range] { width: 100%; accent-color: #1796E6; }
.gc-check {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600 !important; font-size: 13px; margin-top: 12px;
}

.gc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.gc-row > div { display: flex; flex-direction: column; min-width: 0; }
.gc-row label { margin: 10px 0 4px; }
.gc-swatch {
  width: 100%; height: 38px; padding: 2px;
  border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.gc-swatch::-webkit-color-swatch-wrapper { padding: 2px; }
.gc-swatch::-webkit-color-swatch { border: none; border-radius: 5px; }
.gc-swatch::-moz-color-swatch { border: none; border-radius: 5px; }

/* Bar controls collapse away until the caption bar is switched on. */
.gc-barbox { display: none; }
.gc-barbox.gc-open { display: block; }

.gc-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.gc-btn {
  padding: 13px 16px; border: none; border-radius: 9px;
  background: var(--gc-blue); color: #fff;
  font-weight: 700; font-size: 15px; cursor: pointer; width: 100%;
  text-align: center; text-decoration: none; display: block;
}
.gc-btn:hover:not(:disabled) { background: #0b7fcc; color: #fff; text-decoration: none; }
.gc-btn:disabled { opacity: .45; cursor: not-allowed; }
.gc-btn--ghost {
  background: #fff; color: #334155; border: 1px solid #cbd5e1;
  font-weight: 600; padding: 10px 16px; font-size: 14px;
}
.gc-btn--ghost:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.gc-note { font-size: 12px; color: #94a3b8; line-height: 1.5; margin: 10px 0 0; }

.gc-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gc-preset {
  border: 1px solid #cbd5e1; background: #fff; border-radius: 20px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; color: #334155; cursor: pointer;
}
.gc-preset:hover { background: #f1f5f9; }

/* ── result ──────────────────────────────────────────────────────────── */
.gc-result {
  display: none; margin-top: 18px; padding: 16px;
  border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 12px;
}
.gc-result.gc-open { display: block; }
.gc-result img { max-width: 100%; border-radius: 8px; }

/* ── shrink-to-corner preview ────────────────────────────────────────
   Once the stage scrolls out of view it becomes a small card in the corner,
   so the preview stays visible while you are down in the controls or the
   copy. Tapping it scrolls back up. A spacer holds the stage's place so the
   page does not jump when it goes position:fixed. */
.gc-stage.gc-mini {
  position: fixed;
  right: 14px; bottom: 14px; left: auto; top: auto;
  width: 190px; max-width: 46vw;
  margin: 0; padding: 7px;
  z-index: 1030;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(15,23,42,.28);
  cursor: pointer;
}
.gc-stage.gc-mini .gc-status,
.gc-stage.gc-mini .gc-result { display: none; }
.gc-stage.gc-mini::after {
  content: "tap to edit";
  display: block; text-align: center;
  font-size: 10px; color: #64748b; padding-top: 4px; line-height: 1.4;
}
.gc-stage-spacer { display: none; }
.gc-stage-spacer.gc-active { display: block; }

@media (max-width: 900px) {
  .gc-stage { padding: 10px; }
  .gc-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; align-items: end; }
  .gc-controls > label,
  .gc-controls > input[type=text],
  .gc-controls > .gc-check,
  .gc-controls > .gc-barbox,
  .gc-controls > .gc-actions,
  .gc-controls > .gc-note,
  .gc-controls > .gc-row,
  .gc-controls > .gc-presets { grid-column: 1 / -1; }
  /* 16px keeps iOS from zooming the page on focus. */
  .gc-controls input[type=text], .gc-controls select { font-size: 16px; padding: 11px 12px; }
  .gc-controls input[type=range] { height: 30px; }
  .gc-stage.gc-mini { width: 150px; }
}