/*
 * fetcher-trimmer.css
 * Inline scrub-to-trim viewer that expands into the space above the URL bar
 * when a long-form source (Twitch VOD) is recognised, and collapses back down
 * on fetch. Plays a preview via hls.js through Fetcher's same-origin HLS proxy
 * (server/preview.py) — only the segments you scrub to are loaded.
 */

/* Mount = a smooth 0fr->1fr height reveal (no fixed pixel height needed). */
.trim-mount{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-base) var(--ease), margin-bottom var(--dur-base) var(--ease);
  margin-bottom:0;
  width:100%;
}
.trim-mount.open{
  grid-template-rows:1fr;
  margin-bottom:14px;
}
.trim-mount-inner{overflow:hidden;min-height:0;}

.trim-panel{
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  opacity:0;transform:translateY(6px);
  transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.trim-mount.open .trim-panel{opacity:1;transform:none;}

.trim-head{
  display:flex;align-items:center;gap:10px;
  padding:9px 13px;border-bottom:1px solid var(--border);
}
.trim-head-icon{display:flex;color:var(--accent);flex:0 0 auto;}
.trim-title{
  font-size:12.5px;font-weight:500;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
}

.trim-video-wrap{
  position:relative;background:#000;
  height:clamp(160px, 38vh, 340px);
  display:flex;align-items:center;justify-content:center;
}
.trim-video{width:100%;height:100%;object-fit:contain;background:#000;display:block;}
.trim-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#e9e9ea;font-size:13px;gap:9px;background:#000;
}
.trim-loading.err{color:#ff9b9b;}
.trim-loading[hidden]{display:none;}
.trim-loading .spin-ring{border-color:rgba(255,255,255,.3);border-top-color:#fff;}

.trim-controls{
  display:flex;align-items:center;gap:11px;
  padding:10px 14px 2px;
}
.trim-play{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;
  border:1px solid var(--border);background:var(--bg);color:var(--ink);cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease);
}
.trim-play:hover{border-color:var(--border-strong);}
.trim-play svg{width:14px;height:14px;}
.trim-play .icon-pause{display:none;}
.trim-play.playing .icon-play{display:none;}
.trim-play.playing .icon-pause{display:block;}
.trim-time{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.trim-cur{color:var(--ink);}

/* Timeline */
.trim-timeline{padding:10px 14px 2px;}
.trim-track{
  position:relative;height:32px;cursor:pointer;
  border-radius:8px;background:var(--rail);touch-action:none;
}
.trim-track::before{
  content:"";position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%);
  border-radius:999px;background:color-mix(in srgb, var(--ink) 10%, transparent);
}
.trim-range{
  position:absolute;top:50%;height:6px;transform:translateY(-50%);
  border-radius:999px;background:var(--accent);opacity:.55;
}
.trim-playhead{
  position:absolute;top:4px;bottom:4px;width:2px;margin-left:-1px;
  background:var(--ink);border-radius:2px;pointer-events:none;opacity:.8;
}
.trim-handle{
  position:absolute;top:50%;width:13px;height:24px;margin-left:-6.5px;transform:translateY(-50%);
  background:var(--bg);border:1.5px solid var(--ink);border-radius:5px;
  cursor:ew-resize;touch-action:none;box-shadow:var(--shadow-sm);z-index:2;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
/* Keep the visible handle compact, but make it forgiving to grab. The transparent
   pseudo-element participates in pointer hit-testing without changing layout. */
.trim-handle::before{
  content:"";position:absolute;inset:-8px;background:transparent;
}
.trim-handle::after{
  content:"";position:absolute;left:50%;top:50%;width:2px;height:10px;
  transform:translate(-50%,-50%);background:var(--ink-faint);border-radius:2px;
}
.trim-handle:hover,.trim-handle.dragging{border-color:var(--accent-ink);background:var(--accent-tint);}

.trim-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:11px 14px 13px;
}
.trim-readout{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.trim-time-input{
  width:64px;text-align:center;
  border:1px solid var(--border);border-radius:8px;background:var(--bg);
  color:var(--ink);font-family:inherit;font-size:12.5px;padding:5px 6px;
  transition:border-color var(--dur-fast) var(--ease);
}
.trim-time-input:focus{outline:none;border-color:var(--border-strong);}
.trim-dash{color:var(--ink-faint);}
.trim-sel-dur{color:var(--ink-faint);}
.trim-hint{font-size:11.5px;color:var(--ink-faint);}