/* runway-free-api panel base styles. Single sheet to keep deploys simple. */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0b0e13;
  color: #e6e9ef;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: #6aa2ff; text-decoration: none; }
a:hover { text-decoration: underline; }

input, textarea, select, button {
  font: inherit;
  color: inherit;
}

input, textarea, select {
  background: #161b22;
  border: 1px solid #2a3140;
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input:focus, textarea:focus, select:focus {
  border-color: #4a86ff;
  box-shadow: 0 0 0 3px rgba(74, 134, 255, 0.16);
}
textarea { min-height: 80px; resize: vertical; font-family: inherit; }
input[type="number"] { width: 110px; }

button, .btn {
  background: #2a55c8;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s;
  font-weight: 500;
}
button:hover, .btn:hover { background: #3563da; }
button:active { transform: translateY(1px); }
button:disabled { background: #475266; cursor: not-allowed; transform: none; }
button.secondary, .btn.secondary { background: #232936; color: #c8cfdc; }
button.secondary:hover { background: #2e3647; }
button.danger, .btn.danger { background: #b34040; }
button.danger:hover { background: #c14a4a; }
button.ghost {
  background: transparent;
  color: #8893a8;
  padding: 4px 10px;
  border: 1px solid #232936;
}
button.ghost:hover { background: #161b22; color: #fff; }

.nav {
  background: #0e1218;
  border-bottom: 1px solid #1d232f;
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 50px;
  gap: 4px;
}
.nav .brand {
  font-weight: 600;
  margin-right: 16px;
  color: #f4f6fa;
}
.nav a {
  color: #8893a8;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 500;
}
.nav a.active { background: #1a2030; color: #fff; }
.nav a:hover { background: #161b22; color: #fff; text-decoration: none; }
.nav .spacer { flex: 1; }

.container { max-width: 1280px; margin: 0 auto; padding: 24px; }
.container.wide { max-width: 1480px; }

.card {
  background: #11151c;
  border: 1px solid #1d232f;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.card h2 { margin: 0 0 14px; font-size: 14px; color: #f4f6fa; font-weight: 600; letter-spacing: 0.2px; }
.card h3 { margin: 12px 0 6px; font-size: 12px; color: #8893a8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.kv { display: flex; flex-direction: column; gap: 4px; }
.kv .k { color: #8893a8; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.kv .v { font-size: 18px; font-weight: 500; color: #f4f6fa; }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid #1d232f;
  vertical-align: top;
}
th {
  color: #8893a8;
  font-weight: 500;
  background: #0e1218;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
tr:hover td { background: #14191f; }

.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.tight { gap: 4px; }

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: #232936;
  color: #b8c0d0;
  white-space: nowrap;
}
.tag.ok       { background: #16331e; color: #6dd58d; }
.tag.warn     { background: #3a2f15; color: #e8b04d; }
.tag.err      { background: #3a181c; color: #f06b78; }
.tag.info     { background: #14283f; color: #6aa2ff; }
.tag.premium  { background: #2a1a3a; color: #c08bff; }
.tag.fast     { background: #2a3340; color: #6aa2ff; }
.tag.audio    { background: #163331; color: #4cd6c2; }
.tag.refs     { background: #2a2520; color: #d4a262; }
.tag.v2v      { background: #2a201d; color: #ff9c6e; }
.tag.\34 k    { background: #1f2440; color: #8e9bff; }

.muted { color: #8893a8; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dim { opacity: 0.6; }

/* Form layout helpers */
.form-row {
  display: grid;
  gap: 12px;
  grid-template-columns: 140px 1fr;
  align-items: center;
  margin-bottom: 12px;
}
.form-row.full { grid-template-columns: 1fr; }
.form-row label { color: #b8c0d0; font-weight: 500; font-size: 12.5px; }
.form-row .hint { color: #6c7588; font-size: 11px; margin-top: 4px; }

.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: #1a2030;
  border-left: 3px solid #4a86ff;
  padding: 12px 16px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  max-width: 360px;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.toast-error { border-left-color: #c14a4a; }
.toast.toast-success { border-left-color: #5fb56e; }

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(74, 134, 255, 0.06), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(120, 80, 220, 0.05), transparent 40%),
    #0b0e13;
}
.login-card { width: 360px; }

pre {
  background: #080a0e;
  border: 1px solid #1d232f;
  border-radius: 6px;
  padding: 12px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 12px;
  color: #c8cfdc;
}

video {
  max-width: 100%;
  border-radius: 6px;
  background: #000;
}

/* ---- chip group: pill-style segmented control for ratios/durations ---- */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  border: 1px solid #232936;
  background: #11151c;
  color: #c8cfdc;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  user-select: none;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.chip:hover { border-color: #2a3140; background: #161b22; }
.chip[aria-pressed="true"] {
  background: #1f2c4a;
  border-color: #4a86ff;
  color: #fff;
}
.chip[disabled] { opacity: 0.35; cursor: not-allowed; }

/* ---- model picker grid ----------------------------------------------- */
.provider-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.provider-tab {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid #232936;
  background: #11151c;
  color: #8893a8;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
}
.provider-tab[aria-pressed="true"] {
  background: #1a2030;
  color: #fff;
  border-color: #2a55c8;
}
.provider-tab:hover { color: #fff; }

.model-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.model-card {
  border: 1px solid #232936;
  background: #11151c;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.05s;
}
.model-card:hover {
  border-color: #2a3140;
  background: #14191f;
}
.model-card[aria-pressed="true"] {
  border-color: #4a86ff;
  background: #14202f;
  box-shadow: 0 0 0 1px #4a86ff inset;
}
.model-card .name {
  font-weight: 600;
  color: #f4f6fa;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.model-card .desc {
  color: #8893a8;
  font-size: 11.5px;
  line-height: 1.45;
  min-height: 32px;
}
.model-card .meta {
  margin-top: 6px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* ---- two-column layout for playground ------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px) {
  .split { grid-template-columns: 1fr; }
}

/* ---- frame uploader ------------------------------------------------- */
.frame-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.frame-slot {
  border: 1px dashed #2a3140;
  border-radius: 8px;
  background: #0d1117;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.12s;
}
.frame-slot:hover { border-color: #4a86ff; }
.frame-slot.has-image { border: 1px solid transparent; }
.frame-slot img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.frame-slot .label {
  font-size: 11.5px;
  color: #8893a8;
  z-index: 1;
}
.frame-slot .hint {
  font-size: 11px;
  color: #6c7588;
  z-index: 1;
}
.frame-slot .clear {
  position: absolute;
  top: 6px; right: 6px;
  z-index: 2;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 0;
  border-radius: 999px;
  width: 22px; height: 22px;
  padding: 0;
  font-size: 12px;
  line-height: 22px;
  cursor: pointer;
}
.frame-slot.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: #0a0d12;
}

/* ---- progress bar -------------------------------------------------- */
.progress {
  height: 6px;
  background: #1d232f;
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0;
}
.progress > .bar {
  height: 100%;
  background: linear-gradient(90deg, #4a86ff, #6aa2ff);
  width: 0;
  transition: width 0.3s ease;
}
.progress.indeterminate > .bar {
  width: 30%;
  animation: indeterminate 1.4s linear infinite;
}
@keyframes indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.empty-state {
  text-align: center;
  padding: 32px 16px;
  color: #6c7588;
  font-size: 13px;
}

/* ---- log row thumbnails + lightbox --------------------------------- */
.log-thumbs {
  display: flex;
  gap: 4px;
  align-items: center;
}
.log-thumb {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border: 1px solid #232936;
  border-radius: 4px;
  background: #0d1117;
  cursor: zoom-in;
  flex-shrink: 0;
}
.log-thumb.placeholder {
  display: grid;
  place-items: center;
  color: #475266;
  font-size: 11px;
}
.log-prompt-cell {
  max-width: 280px;
  font-size: 12px;
  color: #c8cfdc;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.log-prompt-cell.empty { color: #6c7588; font-style: italic; }

/* Detail-panel input frame grid */
.frames-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.frame-card {
  border: 1px solid #232936;
  border-radius: 6px;
  background: #0d1117;
  overflow: hidden;
}
.frame-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  cursor: zoom-in;
  display: block;
}
.frame-card .frame-label {
  padding: 6px 8px;
  font-size: 11px;
  color: #8893a8;
  border-top: 1px solid #232936;
  display: flex;
  justify-content: space-between;
}
.frame-card .frame-label .tag-text {
  color: #6aa2ff;
  font-weight: 600;
}

/* ---- lightbox ------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  cursor: zoom-out;
  padding: 24px;
}
.lightbox.show { display: flex; }
.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

/* ---- mode tabs (Multi-reference / Keyframe / Image / Text / Video) ---- */
.mode-tabs {
  display: flex;
  gap: 4px;
  background: #0d1117;
  border: 1px solid #1d232f;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 14px;
}
.mode-tab {
  flex: 1;
  padding: 8px 10px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: #8893a8;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-align: center;
}
.mode-tab:hover { color: #fff; background: #14191f; }
.mode-tab[aria-pressed="true"] {
  background: #1a2030;
  color: #fff;
  box-shadow: inset 0 0 0 1px #2a55c8;
}
.mode-tab[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.mode-tab[disabled]:hover { background: transparent; color: #8893a8; }
.mode-tab .icon {
  display: inline-block;
  margin-right: 4px;
  font-size: 12px;
  vertical-align: -1px;
}

/* ---- references grid ------------------------------------------------ */
.refs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
.ref-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid #232936;
  background: #0d1117;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.12s, transform 0.05s;
}
.ref-tile:hover { border-color: #4a86ff; }
.ref-tile.dragging { opacity: 0.4; }
.ref-tile.drop-target { border-color: #4a86ff; transform: scale(1.02); }
.ref-tile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ref-tile.add {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #6c7588;
  font-size: 11.5px;
}
.ref-tile.add:hover { color: #c8cfdc; background: #11151c; }
.ref-tile .ref-tag {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  color: #fff;
  font-size: 11px;
  padding: 14px 8px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.ref-tile .ref-tag::before {
  content: "@";
  color: #6aa2ff;
  font-weight: 600;
}
.ref-tile .ref-tag-input {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  padding: 2px 6px;
  width: 100%;
  outline: none;
}
.ref-tile .ref-tag-input:focus {
  border-color: #4a86ff;
  background: rgba(0,0,0,0.65);
}
.ref-tile .clear {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: 0;
  border-radius: 999px;
  width: 20px; height: 20px;
  padding: 0;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
}
.ref-tile:hover .clear { opacity: 1; }

.refs-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: #6c7588;
  margin-top: 8px;
}
.refs-meta .hint kbd {
  background: #232936;
  border: 1px solid #2a3140;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10.5px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #c8cfdc;
}

/* ---- prompt area + mention popup ----------------------------------- */
.prompt-wrap { position: relative; }
.prompt-wrap .prompt-counter {
  position: absolute;
  right: 8px; bottom: 8px;
  font-size: 11px;
  color: #6c7588;
  pointer-events: none;
  background: rgba(13, 17, 23, 0.85);
  padding: 2px 6px;
  border-radius: 4px;
}

.mention-popup {
  position: absolute;
  z-index: 30;
  background: #11151c;
  border: 1px solid #2a3140;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.5);
  min-width: 200px;
  max-height: 220px;
  overflow: auto;
  padding: 4px;
}
.mention-popup .opt {
  padding: 6px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px;
}
.mention-popup .opt[aria-selected="true"] { background: #1a2030; }
.mention-popup .opt:hover { background: #14191f; }
.mention-popup .opt img {
  width: 24px; height: 24px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}
.mention-popup .opt .tag-text {
  color: #6aa2ff;
  font-weight: 600;
}
.mention-popup .opt .name-text {
  color: #8893a8;
  font-size: 11px;
}

/* ---- drop overlay ---------------------------------------------------- */
.drop-overlay {
  position: fixed;
  inset: 0;
  background: rgba(74, 134, 255, 0.08);
  border: 3px dashed #4a86ff;
  border-radius: 14px;
  margin: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  z-index: 9000;
  pointer-events: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.drop-overlay.show { display: flex; }

/* ---- frame slot drag-active state ----------------------------------- */
.frame-slot.drag-active {
  border-color: #4a86ff;
  background: #14202f;
}

/* ---- subtle param-change animation --------------------------------- */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74, 134, 255, 0.45); }
  100% { box-shadow: 0 0 0 8px rgba(74, 134, 255, 0);  }
}
.chip.just-changed { animation: pulse 0.5s ease-out; }

/* ---- button spinner -------------------------------------------------- */
.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  margin-right: 6px;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- connection dot in the nav (SSE alive/dead indicator) ----------- */
.conn-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin: 0 8px;
  background: #475266;
  transition: background 0.2s, box-shadow 0.2s;
}
.conn-dot--on  { background: #5fb56e; box-shadow: 0 0 6px rgba(95, 181, 110, 0.45); }
.conn-dot--off { background: #c14a4a; }

/* ---- prompt counter + stat number animation ------------------------- */
@keyframes stat-pulse {
  0%   { color: #6aa2ff; }
  100% { color: inherit; }
}
.kv .v.changed { animation: stat-pulse 0.6s ease-out; }