/*
 * clips.css -- Clips (2026-10-13): the clip editor (public/js/xive-clips.js), the clip page
 * (pages::clip), and the watch page's Clips tab.
 *
 * NOT TAILWIND, AND NOT BUILT. Linked as-is by the pages that draw clips, and injected by
 * xive-clips.js wherever only the editor opens (the Studio, the OBS Quick Actions dock), so nothing
 * here waits on `npm run build` and no class depends on the scanner. The v2 tokens are read with
 * fallbacks: they are declared under html.xive-shell-v2 only, and the Studio and the OBS dock have
 * their own. Keep this file ASCII-only.
 */
.xclip-modal,
.xclip-editor,
.xclip-page,
.xclip-tab {
  --xclip-accent: var(--xv2-accent, #a855f7);
  --xclip-brand: linear-gradient(100deg, #ff2d78, #a855f7 55%, #3d7bff);
  --xclip-panel: #121019;
  --xclip-glass: rgba(255, 255, 255, 0.05);
  --xclip-line: rgba(255, 255, 255, 0.1);
  --xclip-text: var(--xv2-text, #f5f5f7);
  --xclip-muted: var(--xv2-muted, #a1a1aa);
  --xclip-faint: var(--xv2-faint, #8b8b98);
  --xclip-ok: #4ade80;
  --xclip-bad: #f87171;
}

/* ---------- buttons and fields ---------- */

.xclip-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--xclip-line); background: var(--xclip-glass);
  color: var(--xclip-text); font: inherit; font-size: 13px; font-weight: 650; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
.xclip-btn:hover { background: rgba(255, 255, 255, 0.1); }
.xclip-btn:focus-visible { outline: 2px solid var(--xclip-accent); outline-offset: 2px; }
.xclip-btn[disabled] { opacity: 0.55; cursor: default; }
.xclip-btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.xclip-btn--sm { height: 30px; padding: 0 10px; font-size: 12px; }
.xclip-btn--accent { background: var(--xclip-brand); border-color: transparent; color: #fff; }
.xclip-btn--accent:hover { background: var(--xclip-brand); filter: brightness(1.08); }
.xclip-btn--danger { color: #fca5a5; }
.xclip-btn--danger:hover { background: rgba(239, 68, 68, 0.14); }

.xclip-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px;
  border: 0; background: transparent; color: var(--xclip-muted); font: inherit; font-size: 15px; cursor: pointer;
}
.xclip-icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--xclip-text); }

.xclip-input {
  width: 100%; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--xclip-line);
  background: rgba(0, 0, 0, 0.25); color: var(--xclip-text); font: inherit; font-size: 14px; box-sizing: border-box;
}
.xclip-input:focus { outline: 2px solid var(--xclip-accent); outline-offset: 0; border-color: transparent; }
.xclip-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* ---------- the editor ---------- */

.xclip-modal {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, 0.65); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.xclip-dialog {
  display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: calc(100dvh - 32px); overflow: hidden;
  border-radius: 18px; border: 1px solid var(--xclip-line); background: var(--xclip-panel); color: var(--xclip-text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.xclip-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 0; }
.xclip-dialog__title { margin: 0; font-size: 17px; font-weight: 750; }
.xclip-dialog .xclip-editor { padding: 14px 16px 16px; overflow-y: auto; }

.xclip-editor { display: flex; flex-direction: column; gap: 12px; color: var(--xclip-text); }
.xclip-editor *, .xclip-editor *::before, .xclip-editor *::after { box-sizing: border-box; }

.xclip-state { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 160px; margin: 0; padding: 16px; text-align: center; color: var(--xclip-muted); font-size: 14px; }
.xclip-state.is-error { color: var(--xclip-bad); min-height: 80px; }
.xclip-spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: var(--xclip-accent);
  animation: xclip-spin 0.8s linear infinite; flex: 0 0 auto;
}
@keyframes xclip-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .xclip-spinner { animation-duration: 2.4s; } }

.xclip-stage { position: relative; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.xclip-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

.xclip-trim { display: flex; flex-direction: column; gap: 8px; }
.xclip-trim__track {
  position: relative; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--xclip-line); touch-action: none; cursor: pointer;
}
.xclip-trim__sel {
  position: absolute; top: -1px; bottom: -1px; border-radius: 10px; cursor: grab;
  background: rgba(168, 85, 247, 0.28); border: 2px solid var(--xclip-accent); touch-action: none;
}
.xclip-trim__handle {
  position: absolute; top: 50%; width: 16px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 6px;
  background: #fff; transform: translate(-50%, -50%); cursor: ew-resize; touch-action: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.xclip-trim__handle::after { content: ""; position: absolute; left: 50%; top: 9px; bottom: 9px; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, 0.35); border-radius: 1px; }
.xclip-trim__handle--start { left: 0; }
.xclip-trim__handle--end { left: 100%; }
.xclip-trim__handle:focus-visible { outline: 2px solid var(--xclip-accent); outline-offset: 2px; }
.xclip-trim__playhead { position: absolute; top: -4px; bottom: -4px; left: 0; width: 2px; margin-left: -1px; background: #fff; border-radius: 1px; pointer-events: none; opacity: 0.85; }
.xclip-trim__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.xclip-trim__readout { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--xclip-text); }

.xclip-hint { margin: 0; font-size: 12.5px; color: var(--xclip-faint); }

.xclip-field { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.xclip-field__label { font-size: 12.5px; font-weight: 650; color: var(--xclip-muted); }
.xclip-field__count { font-size: 11.5px; color: var(--xclip-faint); text-align: right; }
.xclip-field .xclip-input { grid-column: 1 / -1; grid-row: 2; }

.xclip-share { display: flex; gap: 8px; }

.xclip-status { min-height: 18px; margin: 0; font-size: 13px; color: var(--xclip-muted); }
.xclip-status.is-saved { color: var(--xclip-ok); }
.xclip-status.is-error { color: var(--xclip-bad); }

.xclip-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Inside the Studio / OBS Quick Action modal the panel is the studio's own; the editor only lays out. */
.xclip-auto { padding: 4px 0; }
.xclip-auto .xclip-state { min-height: 120px; }

/* ---------- a clip card (the watch page's Clips tab reuses .watch-broadcast-card) ---------- */

.xclip-tab { display: flex; flex-direction: column; gap: 10px; }
.xclip-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.xclip-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--xclip-line); }
.xclip-seg button {
  height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--xclip-muted);
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.xclip-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.1); color: var(--xclip-text); }
.xclip-seg button[disabled] { cursor: default; }
.xclip-select {
  height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--xclip-line); background: rgba(0, 0, 0, 0.25);
  color: var(--xclip-text); font: inherit; font-size: 12.5px;
}
.xclip-note { margin: 0; font-size: 13px; color: var(--xclip-muted); }
.xclip-more { align-self: center; }

a.xclip-card { text-decoration: none; color: inherit; }
.xclip-card__thumb { position: relative; }
.xclip-badge {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(0, 0, 0, 0.78);
  color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 18px;
}

/* ---------- the clip page ---------- */

.xclip-page { display: flex; flex-direction: column; gap: 16px; max-width: 1080px; margin: 0 auto; padding: 16px; box-sizing: border-box; color: var(--xclip-text); }
.xclip-page *, .xclip-page *::before, .xclip-page *::after { box-sizing: border-box; }
.xclip-page__player { border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; border: 1px solid var(--xclip-line); }
.xclip-page__player video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.xclip-page__card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: rgba(13, 13, 20, 0.62); border: 1px solid rgba(255, 255, 255, 0.07); }
.xclip-page__title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.xclip-page__meta { margin: 0; font-size: 13.5px; color: var(--xclip-muted); }
.xclip-page__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.xclip-page__channel { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.xclip-page__channel:hover .xclip-page__name { text-decoration: underline; }
.xclip-page__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: rgba(168, 85, 247, 0.18); }
.xclip-page__name { display: block; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xclip-page__by { display: block; font-size: 12.5px; color: var(--xclip-muted); }
.xclip-page__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.xclip-page__gone { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; text-align: center; }

@media (max-width: 640px) {
  .xclip-page { padding: 12px; }
  .xclip-page__title { font-size: 19px; }
  .xclip-share { flex-direction: column; }
}

/* ---------- Studio: VODs & Clips -> Stream clips (rows are the Broadcasts list's .sv-vod) ---------- */

.xclip-studio-thumb { overflow: hidden; text-decoration: none; }
.xclip-studio-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xclip-studio-thumb .sv-vod-time { z-index: 1; }
[data-stream-clips-list] a.sv-vod-title { color: inherit; text-decoration: none; }
[data-stream-clips-list] a.sv-vod-title:hover { text-decoration: underline; }