/* CLIP LAB Phase E - アテレコ工房 overlay styles.
   Own stylesheet (OPENING precedent): src/styles.css is untouched.
   The overlay base mirrors the #view-home / #view-land rules in
   styles.css (position fixed, z-index 40) so the CLIP view behaves
   like the other host overlays. */
#view-clip { position: fixed; inset: 0; z-index: 40; background: #0b1120; overflow: auto; padding: 14px; box-sizing: border-box; }
#view-clip.hidden { display: none; }
.clip-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.clip-head h2 { margin: 0; }
.clip-body { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.clip-panel { background: #16213c; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 12px; }
.clip-panel h3 { margin: 0 0 8px; }
.clip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.clip-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.clip-table th, .clip-table td { border-bottom: 1px solid rgba(255,255,255,0.12); padding: 4px 6px; text-align: left; vertical-align: top; }
.clip-table tr.clip-seg-selected td { background: rgba(255,209,102,0.12); }
.clip-form { display: flex; flex-direction: column; gap: 8px; }
.clip-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.clip-form textarea { min-height: 64px; }
.clip-form .clip-check { flex-direction: row; align-items: center; }
.clip-note { opacity: 0.8; font-size: 13px; }
@media (max-width: 640px) {
  #view-clip { padding: 8px; }
  .clip-table { font-size: 12px; }
}
/* CLIP LAB full integration (CLIP-01 preview / CLIP-02 timeline /
   CLIP-03 undo buttons / CLIP-04 analyze / CLIP-05 .geekclip). All
   new styles live here; src/styles.css stays untouched. */
.clip-preview-wrap { position: relative; background: #000; border-radius: 6px; overflow: hidden; }
#clip-preview-video { display: block; width: 100%; max-height: 420px; background: #000; }
.clip-preview-subtitle {
  position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%);
  max-width: 86%; padding: 4px 12px; border-radius: 4px;
  background: rgba(0, 0, 0, 0.68); color: #fff;
  font-size: 18px; font-weight: 700; line-height: 1.45; text-align: center;
  pointer-events: none;
}
#clip-seek { flex: 1 1 180px; }
.clip-timeline { position: relative; height: 46px; margin-top: 8px; background: #0d1730; border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; overflow: hidden; }
.clip-tl-seg {
  position: absolute; top: 6px; height: 34px; box-sizing: border-box;
  background: rgba(74, 127, 181, 0.55); border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px; cursor: pointer; touch-action: none; overflow: hidden;
}
.clip-tl-seg.clip-tl-selected { background: rgba(255, 209, 102, 0.45); border-color: #ffd166; }
.clip-tl-label { position: absolute; left: 4px; top: 2px; font-size: 11px; color: #fff; pointer-events: none; white-space: nowrap; }
.clip-tl-handle { position: absolute; top: 0; width: 8px; height: 100%; cursor: ew-resize; }
.clip-tl-handle-l { left: 0; }
.clip-tl-handle-r { right: 0; }
.clip-tl-playhead { position: absolute; top: 0; width: 2px; height: 100%; background: #ff5d5d; pointer-events: none; }
#clip-undo:disabled, #clip-redo:disabled { opacity: 0.45; }
@media (max-width: 640px) {
  .clip-preview-subtitle { font-size: 15px; }
  #clip-preview-video { max-height: 300px; }
}